Forum Moderators: not2easy
Here is my problem. I am using an open source web template for selling items on the web. Most of it is straight forward, you put your image in and it puts it in the website for you. However what it does is it shrinks the image to a preset size, you can click on the image and it will open a separate window showing the full sized image. What I want to do is change it so that I can put in a small image and have the larger image pop up when you mouse over it.
I hope this is the right place to ask this question. If anyone has any suggestions or needs more information, any help would be greatly appreciated.
That aside, yes you can use CSS to do popup images upon hover.
for IE6 there's a small problem in that it will only support the :hover pseudo selector for <a> tags. There's javscript based fixes for that.
A lot of how you do this depends on the layout of the rest of the page, so positioning aside:
- in your html you have
<div class="popup">
<img class="thumb" src="#" alt="small cover" />
<img class="large" src="#" alt="large cover" />
</div>
.popup .large {
display:none;
}
now during hover, you want to display the large one:
.popup:hover .large {
display:block;
position:fixed; /* any that gets it out of the flow to avoid a redraw */
top: 100px; /* somewhere that fits with your design*/
left: 100px; /* somewhere that fits with your design*/
}
Putting it together:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.popup .large {
display:none;
}
.popup:hover .large {
display:block;
position:fixed; /* any that gets it out of the flow to avoid a redraw */
top: 100px; /* somewhere that fits with your design*/
left: 100px; /* somewhere that fits with your design*/
}
</style>
</head>
<body>
<div id="wrapper">
<div class="popup">
<img class="thumbnail" src="#" alt="small cover" />
<img class="large" src="#" alt="large cover" />
</div>
</div>
</body>
</html>
Works in Firefox 3, didn't test it in others yet. Will probably break in IE (for sure in IE6), use conditional comments to mend it there and the IE7.js script to get IE6 in line.
Bu tit might be that your CMS might not be cooperating with it all, I'm not sure you'll have the control you want.
Good luck!
