Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create a web page that incorporates an image of a house - with various parts of the house responsive to mouse clicks. The house would be the single primary element on the page.
Given that I will probably employ an illustrator to make an image, should I:
try and make it 'box-like' so that I can do it in HTML5/CSS3
use SVG to get as close to the design as possible
use an imagemap and Javascript for detecting the clicks on the image
if it was a chart-type infographic, I would use a charting JS library but it's more of a custom image.
Links to informative URLs or example pages would be greatly welcomed.
I'd suggest using SVG.
In this way you don't compromise on the quality of the image yet you retain an easy way to 'assign' certain parts of the image to have event handlers attached to them.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I am trying to create a custom Navigation Bar for a website.
The idea is to create , like a pie chart with the different section of the website, expanding on hover, with a image in the background forming part of the chart itself.
Let me clarify with some images:
And then with the hovering effect on one of the parts:
The hovering spread the spiral to the exterior and show the label "Home".
Note that the 'spiral' is representative, normally it would be a logo, or a image.
My question is which technology should i use?
Pure css?
JS?
HTML CANVAS? or SVG?
Another thing is the spiral on the background, if its an image, how can i modify it while hovering? do i need to 're-create' the image with code ? like svg drawings etc..
Thank you very much , any ideas is welcome
I would recommend finding an svg file and uploading it to figma, assigning each section an id, and using event handlers to manage the click events.
This video shows you how to import into figma and assign ids to different sections.
https://www.youtube.com/watch?v=gWai7fYp9PY&ab_channel=DevEd
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
How can I create something like a profile card where I will modify some text and colors and then make it an image? I have no idea where to start.
The best thing to use in this case is SVG. You're combining data with a variety of elements and then putting them all together. SVG is much like HTML, but with a tighter focus on the image itself. You can combine raster elements, your data, and vector elements, to make the final image. From there you can either use this image directly or render it to a PNG.
I strongly recommend leaving it in SVG if at all possible, to preserve the text nature of a lot of this data. Not everyone can see the screen. If you burn text into a raster image, screen readers won't be able to read it.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been trying to figure out how to make a picture have different points where the user can click on one and it will display a description.
It's the same concept as an interactive map, just it's not a map, it's just a picture. The image would be for a website.
Something similar to this codepen (http://codepen.io/ scarl3tt/details/jEBmyG) but i can't get it to work with a different image.
I'm not fluent in either CSS, HTML or JS. However, I am fairly good with both CSS and HMTL.
So I'm wondering, how would I code it? OR is there a tool that generates the code automatically?
Thanks in advance
Joe
You should create an image map using the <area> and <map> tags
There are lots of generators available online too, just do a Google Search
You can also check out this question for more tools used to create Image Maps
With your skills you should use htmlmaps and catch the basic behavior via simple js id-hover/onclick catching.
The useful generators for maps can be found in google.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have a page and I want to create a magnifier for my web page (HTML document not just images), I want do this for some reasons and I just want to know How can I do it? and is this possible?
Nothing is impossible, the word itself says " I'm possible"! Audery Hepburn
I know it's possible for professional programmers, and I'm just asking from them, How to do it?
I need lens magnifier and for all document, something like Windows magnifier
I searched on the Internet but there are just magnifiers for Images, and I need magnifier for all HTML document, and I don't expect you do it for me, I know JavaScript programming and I just need your suggestions and helps to find a way.
Take a look to Zoomooz. "It is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Zoomooz is an easy-to-use jQuery plugin for making any web page element zoom."
Source:
http://jaukia.github.io/zoomooz/
https://github.com/jaukia/zoomooz
https://github.com/m-kermani/magni
I hope it helps :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to create a image gallery using Html 5 Canvas and when I hover a image, it must grow and change opacity. In addition to image selectable and draggable?
How can I do this? Any ideas?
Well sir, first try to code anything and then come to ask for assistance with particular problem. For now it looks like you have no clue about subject and not even tried. I can anwser a question like how to manipulate opacity in canvas, how to implement drag and drop, etc...
but NOT I need someone to implement my whole idea for me
I should also point out that Canvas isn't probably the best technology for this task (in the meaning of both performance and implementation difficulty).
If you insist, you will have to rewrite all functionality which is already easily accessible with DOM and libraries like jQuery.