chiprivers Posted October 21, 2007 Share Posted October 21, 2007 Could somebody help me with how to display a larger version of an image when the mouse hovers over the thumbnail? I have an index page displaying some thumbnail images. I have a slightly larger version of the image saved which I would like to be displayed momentarily as the mouse hovers over the thumb. Quote Link to comment Share on other sites More sharing options...
JJohnsenDK Posted October 21, 2007 Share Posted October 21, 2007 you should use javascript for that.... <img src="your normale image" onmouseover="your bigger image" onmouseout="your normale image" Quote Link to comment Share on other sites More sharing options...
chiprivers Posted October 21, 2007 Author Share Posted October 21, 2007 you should use javascript for that.... <img src="your normale image" onmouseover="your bigger image" onmouseout="your normale image" In the past I have used this basic javascript to do an image change on mouseover, but I need to do here is have the larger image float over the top of the page without effecting the rest of the display. If I change the thumb image to the bigger image the rest of the display is going to distort. Quote Link to comment Share on other sites More sharing options...
JJohnsenDK Posted October 21, 2007 Share Posted October 21, 2007 hmm.. i dont understand the part with the "float over the top of the page". Do you mean if you use the mouseover to make the image bigger the rest of the webpage will "jump" around to make room for the "new" larger image? if you do it sounds like a job for good old AJAX... Quote Link to comment Share on other sites More sharing options...
chiprivers Posted October 21, 2007 Author Share Posted October 21, 2007 hmm.. i dont understand the part with the "float over the top of the page". Do you mean if you use the mouseover to make the image bigger the rest of the webpage will "jump" around to make room for the "new" larger image? if you do it sounds like a job for good old AJAX... I think I can do it using CSS?! possibly have the larger versions of the images scripted into the page already and position them using CSS in the correct position but somehow make them invisible other than when the mouse is over the correct thumbnail. ANybody have any idea what I'm talking about and exactly how to doit? Quote Link to comment Share on other sites More sharing options...
JJohnsenDK Posted October 21, 2007 Share Posted October 21, 2007 yes it can easily be done with CSS, but then you cant get the floating effect you are talking about, and you have to, ask you point out your self, fix the size of the larger image, which means you cant have the images close right next to each ohter. but you shall use the hover function in CSS <div class="image" /></div> STYLESHEET: .image{ height: 150px; width: 150px; backgroundimage: src('blabla.jpg'); } .image hover{ height: 200px; width: 200px; backgroundimage: src('blabla.jpg'); } this should do the work, but as i wrote, it doesnt make the prettiest result. You have to do that with AJAX Quote Link to comment Share on other sites More sharing options...
jellis Posted October 21, 2007 Share Posted October 21, 2007 Don't use CSS in place of Javascript. Use Javascript to control the CSS... the hover pseudo-class is renowned to be highly ineffective in IE. If you just control the "display" class (set to "none" in its native state) and then switch it with Javascript on mouse over. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.