CSS Library: Image CSS: Here
CSS Popup Image Viewer
Author: Dynamic Drive
Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS's ":hover" pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, "popping" up on demand. CSS is behaving more and more like scripting!
Demo:
One of my favorite foods is sushi
Doesn't this look good?, and it's good for you too! Coffee and sushi probably don't mix well, but I like some Zoka Coffee
Zoka Coffee to boot! Here are some thumbnails from my trip to La la land:
Simply beautiful.
So real, it's unreal. Or is it?
The CSS:
Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.
Comment Pages 49 of 53 pages « First < 47 48 49 50 51 > Last »
I can't get the images to appear after I publish it.
I know the CSS and HTML are installed correct because when I preview the page in my browser it works but will not work after I publish it.
The faded boxes show up on the page in the size that I've set but, the image will not. I use Mozilla.
I tried MS Explorer and the images won't even show up on the page
I cut & pasted the css in the HEAD and the rest in the BODY section, but i can only see the thumbnail pics no enlarged pics even when i place the mouse over them...can u help
thanks in advance
1) Add some javascript for swapping images on mouseover. Heres a simple javascript function to place within <script> in <HEAD>.
function SwapImage(cu) {
var imgpath = "bigimage.jpg";
eval("document.images['image"+cu+"'].src=imgpath");
}
cu is a unique identifier for each image you will need to create. You can make this a sequential number of some sort. Replace imgpath with the path to the large image you will place in the container.
2) Identify the image within the container by adding a name attribute. Each popup image on the page needs to have a unique name. I accomplish this by adding a unique identifier to <img> within the <span>. I also change the src the same as the smaller thumbnail image, basically as a placeholder, example;
img src="thumbs/smallimage.jpg" name="image6"
Above shows the placeholder image within the span for the 6th thumbnail in the sequence. If you are using php / asp etc you can build this dynamically by replacing 6 with a variable.
3) Lastly I put in an onMouseover event on the small thumbnail image you will hover over.
img src="thumbs/smallimage.jpg" border="0" onmouseover="SwapImage('6');"
Again you can replace 6 with a variable if you are php/asp, etc.
Now you have a page that loads much quicker. When you first mouseover the thumbnail you will get a small image until the larger one loads.
Hope this is helpful.
Steve
I use it for a contact list, so when you rollover the name of a person in the list, the picture of the person show's up.
The problem is that the name of the person (actual link) wich have the thumbnail class show's on top of the suckerfish submenu items on my site.
It's not a z-index issue on my site .css file. I already doublecheck it. Currently my menu is on a z-index: 6000; so this should not happen....
Any ideas how to solve this?
I can't seem to get the code to work correctly in I.E. Only one thumbnail shows up! I've tried looking through the comment pages and tinkering here and there with the code but I'm not sure what to do...
In Safari, the code works great and all the thumbnails show up. I'm using the code for my store on ebay so I can't use javascript and ideally I could make it work for all browsers... suggestions?
Comment Pages 49 of 53 pages « First < 47 48 49 50 51 > Last »
Commenting is not available in this weblog entry.
where am i supposed to put the css
is it in the head??