HTML mouse-over images possible?

charlesdaly · December 21, 2013

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)

</script>

Then, insert in body:


<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" border=0></span>

Thanks!

thenickdude · December 21, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

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 · December 22, 2013

deleted (solved)

HTML mouse-over images possible?

Comments