HTML mouse-over images possible?

charlesdaly

The mouse-over code I used calls for adding script to the header of the page and since I think we don't have access to the header this code won't work -although it does work in a browser once constructed on a html basics generator. If this isn't working because of the 'no js' constraints of SM is there another way in HTML to make this work?

The code is: (Insert in header)
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-Ff8QG69/0/M/ice2-M.jpg";
staticImage1 = new Image();
staticImage1.src = "http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice1-M.jpg";

// End -->
</script>

Then, insert in body:
<!-- STEP TWO: Insert this code into the BODY of your HTML document -->

<span onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice1-M.jpg&quot; border=0></span>

Thanks!

thenickdude

Yeah, that won't work due to the no-JS constraints. You can do this with pure CSS instead though, which does work on SmugMug:

http://www.ideaforgestudio.com/uncategorized/easiest-way-to-create-a-css-rollover-for-an-image/

Or if you're doing a before-and-after comparison, you might want to check out my customisation here:

http://www.sherlockphotography.org/Customisations/Before-and-after

charlesdaly

Lamah, thanks so much for the links and your speed in responding. I've spent the last many hours trying to make this work but just too code illiterate I guess. The first link seemed good but I really don't know what exactly to use to fill in my specific bits of the code. My two images are named ice1.jpg and ice2.jpg. This is the code I've tried but doesn't work:
CSS
#chads-image-swap-1 {
width: 600px; height: 402px; background: url (http://www.charlesdalyphotography.co...M/ice1-M.jpg);
}
#chads-image-swap-1 img:hover {
opacity: 0;
}

HTML
<div id=”chads-image-swap-1″><img id=”swap-1″ src=”http://www.charlesdalyphotography.co.../M/ice2-M.jpg” alt=”charles daly street art” /></div>

I have both images uploaded to the page where I entered the code and they are there as static images. I didn't know where else to place them for the code to have access to them. The url for that page is http://www.charlesdalyphotography.co...w-Experimental
The first of the three ice images (at the bottom) is the animated gif I started this with and the next two are the first and second stages of what should be the mouse-over
Thanks so much for looking.

Hikin' Mike

It looks like both of those images you posted are the same.

http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice1-M.jpg
http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice2-M.jpg

Hikin' Mike

Typo on my end. I created your image on my test page and it works: http://hikinmike.smugmug.com/Test-Page/.

HTML:
[html]
<div id="chads-image-swap-1">
<img id="swap-1" src="www.charlesdalyphotography.com/Photography/Slideshow-images/i-Ff8QG69/0/M/ice2-M.jpg" alt="charles daly street art" />
</div>
[/html]

CSS:

#chads-image-swap-1 {
    width: 600px; 
    height: 402px; 
    background: url('http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice1-M.jpg');
    }
#chads-image-swap-1 img:hover {
    opacity: 0;
    }

ChancyRat

Mike on your test page, what I see is an image without any red portion.
If my mouse is off the image, the red appears.
If my mouse is on the image, the red disappears.
Is that what's supposed to happen?

krashedmykarch

Hikin' Mike wrote: »

Typo on my end. I created your image on my test page and it works: http://hikinmike.smugmug.com/Test-Page/.

HTML:
[html]
<div id="chads-image-swap-1">
<img id="swap-1" src="www.charlesdalyphotography.com/Photography/Slideshow-images/i-Ff8QG69/0/M/ice2-M.jpg" alt="charles daly street art" />
</div>
[/html]CSS:

#chads-image-swap-1 {
    width: 600px; 
    height: 402px; 
    background: url('http://www.charlesdalyphotography.com/Photography/Slideshow-images/i-2rSMNSn/0/M/ice1-M.jpg');
    }
#chads-image-swap-1 img:hover {
    opacity: 0;
    }

Mike, thanks a ton. That works perfectly. I'll put your phone number on speed dial and keep it under my pillow Congrats on your video and good luck with your book
Best,

krashedmykarch

ChancyRat wrote: »

Mike on your test page, what I see is an image without any red portion.
If my mouse is off the image, the red appears.
If my mouse is on the image, the red disappears.
Is that what's supposed to happen?

Chancy, the two image urls were just reversed. The image without the red should be the first image which is the original with no manipulation and just the ice bound cove as I found it. The red lips is the moused over version. That page also contains an animated gif version of the same images- this is all just testing.
Thanks!

krashedmykarch

mouse over images location
Before starting the mouse-over testing I first uploaded to that page, the two images which sit in that gallery. Once the animated gif and the mouse-over was working I realized that the two static images were still in that gallery so now I have four images; animated, mouse over and two static. I hid the two static and the animated gif no longer worked. So, question; how to have those images available to the code but not be visible as static (separate images)?

Location: http://www.charlesdalyphotography.com/Photography/New-Experimental

Thanks for the look.

charlesdaly

deleted (solved)