I have an image, that show two or more products, where I would like to open a text popup(or a tooltip) with the product description. Different products can be placed in different position in image. There is a tool or a method that if I insert the coordinate(X:Y) of product can compose the image and with hover or click show the popup/tooltip?
An example can be find on ikea site.
Thanks.
You can use the map/area properties of HTML5 to achieve this.
Refer link
Related
I am trying to create an image slider on my webpage that looks similar to the screen you get when you want to see all the apps open in the background of your phone, a la below:
What I want would look very similar to that. I just want the images to be tighter together and horizontal instead of vertical.
Here is a better example:
So, as you can see I have my webpage with the title at the very top and then below that I have all of my images. This is how I want it to look but I also want these images to enlarge if the user hovers over them. When enlarged the image will stay in place and text will appear on the image which the users can read.
Here is another example:
So in the image above, the user has hovered over the image and now it is displaying information and the other images are pushed to the side. The example text is the title text, background image is just the image the user hovered over and the information text is, as the name suggest, the text that gives info.
So my main question here is how I would achieve something like this?
I'm making a website for a local printing company. One of the important requirements of the website is a customize page associated with every product. This page will be having an image of the product and user can upload his logo. This logo will then be presented over the image of the product.
User can move or resize his logo and there is also a textbox in which user can input the text he wants to be printed on the product.
As the user enters text it appears on the product image alongside the logo image he has previously uploaded.
This text should also be movable and and its size can be altered by selecting a font size from a drop down box.
I am thinking of some JavaScript image processing library which provides a support of "Photoshop like layers" but couldn't find any.
I have no clue how to do this. Any help will be much appreciated. Thanks in advance.
I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
I have a doubt. how to move the pop up above find atm locations. I tried it by changing html structure but its not working.
Here's an example
You don't need to use Javascript, CSS will do just fine. You need to create a separate div that you can display and hide with the clickon the 'search ATM' link. Here's a detailed howto on displaying and hiding a div with CSS:
http://www.devinrolsen.com/css-hide-and-display-content/
I have a div area (for main slider. But there will not be sliding inside).
And under this div area there is a tab system.
In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)
When I click one of these images I want to show the related content / photo etc in this Div area above.
How can I do that? Any example? Any clue?
I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)
P.S: when an image is shown the others must be hidden.
Here you are demyr obviously you will have to modify to your exact needs:
http://jsfiddle.net/S4LGr/1/
It is no problem here is the updated code, edit as you need you should really be able to take it from here:
http://jsfiddle.net/S4LGr/3/
I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:
http://jsfiddle.net/S4LGr/5/
Here you go man all the pieces brought together:
http://jsfiddle.net/S4LGr/9/
totallyFeelLikeIdidYourHomeWork lol you owe me a beer!
you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/