Posted 1 year ago #
I don't know how to make a rollover for one image to change to another.
I've checked "all" posts related to my needs, but they are either fragmented or assume you know something else.
I know a tiny amount of CSS so could someone simply post up a script that will do me a rollover "before and after" images. I don't mind using 2 individual images or two joined ones (that much I've learned lol).
Posted 1 year ago #
There's a few ways to do it, but I've got some suggestions.
If you want to use two separate images, you can either use JavaScript to swap the src="" attribute of the <img> tag to the new image on rollover. You can also set it up using only CSS by creating a div the same szie as the images and setting the background to the first image, then set the background to the second image on hover. If you do either of these you'll also have to look at pre-loading the other images as well so there's no delays.
You can also use a single image with only CSS by setting it as the background of an element and moving the background position on hover.
Posted 1 year ago #
Thanks for the help Michael, but you're doing the same as all the other posts I've read, I don't understand.
I copied this script that the poster said was working and pasted into a post changing the url's, but it does not work for me.
<img title="test" onmouseover="test.src='http://photo-restore.me.uk/wp-content/uploads/2012/06/RED.jpg';" onmouseout="test.src='http://photo-restore.me.uk/wp-content/uploads/2012/06/BLUE.jpg';" src="http://photo-restore.me.uk/wp-content/uploads/2012/06/BLUE.jpg" alt="" width="300" height="200" />
If it's as simple as this code, can someone tell me why this does not work?
Posted 1 year ago #
This is where you need to learn more about CSS and JavaScript. :)
The script that you have looks like it should work, but it's also very messy and really hard to understand. What I've done below is a lot more elegent (I think anyway), and it keeps things easy to read and understand. Well, as easy as they can be for this anyway.
<img id="image1" src="image1.jpg" width="150" height="150" />
<script type="text/javascript">
jQuery (document).ready (function () {
var image_1 = jQuery ("#image1");
image_1.mouseover (function () {
this.src = "image2.jpg";
});
image_1.mouseout (function () {
this.src = "image1.jpg";
});
});
</script>I've tested this and it works perfectly. You just need to have the two image files in the same folder s this and it will do what you want it to. Of coruse you can always modify it to point to where ever your image files are.
Posted 1 year ago #
Thanks Michael, I will certainly give that a try although I finally managed to get the other working by deleting test. from the 2nd & 3rd image url's.
This also works now, but you're right about yours looking cleaner.
<img title="test" onmouseover="src='http://photo-restore.me.uk/wp-content/uploads/2012/06/RED.jpg';" onmouseout="src='http://photo-restore.me.uk/wp-content/uploads/2012/06/BLUE.jpg';" src="http://photo-restore.me.uk/wp-content/uploads/2012/06/BLUE.jpg" alt="" width="300" height="200" />
This topic has been closed to new replies.
