How can I have images changing with mouse overs or clicks?

@jammer20002Feb 06.2005

Can someone tell me how I can change a picture when the mouse is put over another smaller picture?

I’ve seen this done in loads of places, but am not sure how it’s done.

Thanks.

Jam

to post a comment

23 Comments(s) _↴

@gumbystationFeb 06.2005 — #Do you know anything about onMouseOver from Javascript/DHTML or a:hover for CSS/HTML? I would give those a look.

@phpnoviceFeb 06.2005 — #Image mouseovers would required JavaScript:

<i>
 </i>&lt;img name="myImage" src="image1.gif" ...
 onmouseover="document.images['myImage'].src='image2.gif';return true;"
 onmouseout="document.images['myImage'].src='image1.gif';return true;"
 <i>&gt;</i>

@gumbystationFeb 06.2005 — #Well, that's ONE way, but there are many others. Just depends on your audience. Who do you think will be viewing your website?

@IncaWarriorFeb 06.2005 — #CSS is nicer but harder with IE

@BeachSideFeb 06.2005 — #I agree... CSS is nicer, faster, and smaller in file size that JavaScript. Besides if they have JavaScript turned off you would not be able to navigate your site as is with most sites that use JavaScript to preload and switch images onmouseover unless you put it in the body tag and used onload but then the rollover effect wouldn't work

@phpnoviceFeb 06.2005 — #[i]Originally posted by gumbystation [/i]

[B]...there are many others...[/B][/QUOTE]
"Many"? I know of only [u][i]one[/i][/u] other (discounting variations on the same theme). Talk is cheap. Start posting examples of the "many".:p

@jammer20002authorFeb 06.2005 — #erm...

thanks for all the replies.

rollover changes - i know how to do. ?

what i wanted was to have 4 small thumbnail images across the top, and one big image below this.

what i want is to have the big image change when the mouse is put over the thumbnail images.

i'd like to do it the 'most' recommended way.

if that involves css... then i'd like to do it using that.

also... i'm confused about how to preload images for the above effect.

is preloading recommended at all?

in anycase, i'm confused as to how i can have the images load into the actual page without them showing?

thanks.

jam

@phpnoviceFeb 06.2005 — #[i]Originally posted by jammer20002 [/i]

[B]what i wanted was to have 4 small thumbnail images across the top, and one big image below this.

what i want is to have the big image change when the mouse is put over the thumbnail images.

i'd like to do it the 'most' recommended way.

if that involves css... then i'd like to do it using that.[/B][/QUOTE]
I don't think that can be done with CSS. CSS doesn't provide much (if anything) in the way of relating a change in status (hover) for one object to a change in style (image change) for another object. JavaScript or IFRAMES would be required.
[i]Originally posted by jammer20002 [/i]

[B]also... i'm confused about how to preload images for the above effect.

is preloading recommended at all?

in anycase, i'm confused as to how i can have the images load into the actual page without them showing?[/B][/QUOTE]
Preloading is only required if you want image changes to be instantaneous -- rather than wait for the download. When preloading images, they aren't loaded into the page -- they are loaded into the visitor's internet cache for ready access when the browser is ready to render them. The following JavaScript is an example of preloading:

<i>
 </i>var tempImage = new Image();
 tempImage.src = "myImage.jpg";

This would have to be repeated for each image requiring preload.

@jammer20002authorFeb 06.2005 — #this might sound stooopid, but i think i had the answer to my question anyway. ?

i've previously used this code:

function setText(text)

{

var obj = document.getElementById("msg");

obj.innerHTML = text;

}

i then have variables for the text, which is html - and this can contain pictures.

i have a onmouseover actions that trggers the text variable to be chnaged to whatever i want.

[B]is the above javascript or css?[/B]

thanks.

@gumbystationFeb 06.2005 — #Not to do it for arguements stake, but just to clear it up...you can to it with CSS, it's hard to create but easy to maintain. ALSO, you can do it in flash. It's easy to make but if you don't know flash, you have a lot of research to do. Also, you can makeshift other languages to do a:hover. So there ARE others. Many might have been too strong of a word. I'm sorry you take things so literal.

@gumbystationFeb 06.2005 — #[i]Originally posted by jammer20002 [/i]

[B]this might sound stooopid, but i think i had the answer to my question anyway. ?

i've previously used this code:

function setText(text)

{

var obj = document.getElementById("msg");

obj.innerHTML = text;

}

i then have variables ...

[B]is the above javascript or css?[/B]

thanks. [/B][/QUOTE]

That is Javascript. Works well, but you need to remember that people can and do turn Javascript off for fear of viruses.

@phpnoviceFeb 06.2005 — #[i]Originally posted by gumbystation [/i]

[B]...you can to it with CSS, it's hard to create but easy to maintain.[/B][/QUOTE]
I'm interested to see a CSS example of a hover on one object changing the image in other object. Particularly in the case asked for here:
[i]Originally posted by jammer20002 [/i]

[B]what i wanted was to have 4 small thumbnail images across the top, and one big image below this.

what i want is to have the big image change when the mouse is put over the thumbnail images.[/B][/QUOTE]

@MstrBobFeb 06.2005 — #[font=trebuchet ms][COLOR=royalblue]As would be I. At this point, we're going beyond CSS. CSS's purpose is to style a document. When you're using elments to change another element, you're changing the value of that other element. You're changing it's source. That realm belongs to scripting, in which you manipulate the data via the DOM.[/COLOR][/font]

@gumbystationFeb 06.2005 — #[i]Originally posted by MstrBob [/i]

[B][font=trebuchet ms][COLOR=royalblue]As would be I. At this point, we're going beyond CSS. CSS's purpose is to style a document. When you're using elments to change another element, you're changing the value of that other element. You're changing it's source. That realm belongs to scripting, in which you manipulate the data via the DOM.[/COLOR][/font] [/B][/QUOTE]

-- [URL=http://www.simplebits.com/bits/minitabs.html]Here is an example[/URL] using CSS.

-- The documenting of it is [URL=http://www.simplebits.com/notebook/2003/06/07/mini_tabs_the_untab_tab.html]here[/URL].

It sounds like you guys thought I was lying to you. I'm not here to start trouble. ? I'm just trying to give him many options. Just in case he decided in the future to change things up!

@jammer20002authorFeb 06.2005 — #hey, thanks for the reply.

i would much prefer to do it in css.

but... the example you gave doesn't include changing images, right?

@MstrBobFeb 06.2005 — #[font=trebuchet ms][COLOR=royalblue][i]Originally posted by gumbystation [/i]

[B]-- [URL=http://www.simplebits.com/bits/minitabs.html]Here is an example[/URL] using CSS.

-- The documenting of it is [URL=http://www.simplebits.com/notebook/2003/06/07/mini_tabs_the_untab_tab.html]here[/URL].

It sounds like you guys thought I was lying to you. I'm not here to start trouble. ? I'm just trying to give him many options. Just in case he decided in the future to change things up! [/B][/QUOTE]

Unless I misunderstand, that's not what the OP is talking about. I think the OP is talking about something like this:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en" dir="ltr"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;meta http-equiv="content-script-type" content="text/javascript"&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 &lt;!--
 function change(pic)
 {
 document.getElementById('jpic').src=pic;
 }
 function revert()
 {
 document.getElementById('jpic').src='pic0.jpg';
 }
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;ul&gt;
 &lt;li onmouseover="change('pic1.jpg');" onmouseout="revert();"&gt;Hover 1&lt;/li&gt;
 &lt;li onmouseover="change('pic2.jpg');" onmouseout="revert();"&gt;Hover 2&lt;/li&gt;
 &lt;li onmouseover="change('pic3.jpg');" onmouseout="revert();"&gt;Hover 3&lt;/li&gt;
 &lt;li onmouseover="change('pic4.jpg');" onmouseout="revert();"&gt;Hover 4&lt;/li&gt;
 &lt;/ul&gt;
 &lt;img src="pic0.jpg" alt="" id="jpic"&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/COLOR][/font]

@phpnoviceFeb 06.2005 — #I'm not making trouble either. I'm just looking to learn, but...

Sorry, the indicated example is merely changing the appearance of the link object based on mousing over that same object (which is quite easy -- even for me). The stated objective was to change the appearance of a [u][i]different[/i][/u] object based on hovering over some [u][i]other[/i][/u] object. To that, I stated that CSS couldn't be used for that purpose and, then, you stated that CSS [u][i]could[/i][/u] be used for that purpose.

Perhaps you overstated/mis-stated yourself?

@jammer20002authorFeb 06.2005 — #erm thanks phpnovice. ?

i think u've stated my case.

if i have to use javasrcipt... then so be it. ?

i wasn't aware that css is not for scripting, which for my needs, this is a requirement.

@gumbystationFeb 06.2005 — #[i]Originally posted by phpnovice [/i]

[B]Perhaps you overstated/mis-stated yourself? [/B][/QUOTE]

[B][COLOR=green]mis-stated[/COLOR][/B]

@BeachSideFeb 06.2005 — #Actually you don't change the picture with CSS you change it's position. You can see it work on [URL=http://beachsidehosting.com]my site[/URL] with the prices and check marks right above the prices

To acheive this effect you make a picture with the different states. So if you have 3 states you would have up down and hover. If you made an up image that was say 20px then you make a 60px pic with all three states. Then in the CSS you say that for the up state it's position is 0px for the hover state it is at 20px and down it is at 40px.

This method is actually faster than JavaScript and you don't need to preload and cache anything as the entire image with all three states is loaded when the page loads.

I am fixin to watch the Super Bowl so when that is done I'll throw together a little example for you.

@MstrBobFeb 06.2005 — #[font=trebuchet ms][COLOR=royalblue]The commercials aren't so good thus far. Why don't people seem to understand this, the OP wants to change a picture that is [B]different[/b] from the element that's being hovered over. So, you hover over a link, and a DIFFERENT image changes. How would you accomplish that with CSS?[/COLOR][/font]

@IncaWarriorFeb 07.2005 — #I see what he's trying to do now, javascript would be a good thing to use, CSS would be the wrong thing in this case.

bob- make a div with the background being the first picture, then the new background the other picture.

@BeachSideFeb 07.2005 — #[i]Originally posted by MstrBob [/i]

[B][font=trebuchet ms][COLOR=royalblue]The commercials aren't so good thus far. Why don't people seem to understand this, the OP wants to change a picture that is [B]different[/b] from the element that's being hovered over. So, you hover over a link, and a DIFFERENT image changes. How would you accomplish that with CSS?[/COLOR][/font] [/B][/QUOTE]

Ah well he kept referring to just changing one picture. My bad.

Also in #HTML _↴

What's the easiest way to manipulate text in a HTML form?Need Help Removing CSS Email

Success!

Help @jammer20002 spread the word by sharing this article on Twitter...

Tweet This

How can I have images changing with mouse overs or clicks?

23 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

How can I have images changing with mouse overs or clicks?

23 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #HTML _↴