Go Back   Computer Forums > Web Design | Website Development > Web Programming
Join Computer forums Today

Thread Tools Search this Thread Display Modes
Old 03-16-2007, 08:00 AM   #1
Beta Member
Join Date: Mar 2007
Posts: 4
Default mouseover image HTML

Hey guys, I was wondering if anyone knows the HTML for mouseover. I want it so when I scroll over image A, image B appears.
For example, when I scroll over a + button, the image appears.
p.s. I already know of 'image swap', but that is limited to the image's dimensions. I want different image dimensions for the pictures.

Thanky you in advance

mayo is offline   Reply With Quote
Old 03-16-2007, 08:31 PM   #2
In Runtime
jamieoliver22's Avatar
Join Date: Apr 2004
Posts: 245
Default Re: mouseover image HTML

You need to use JavaScript for something like that, but if I was you, use CSS instead. Its a lot better for the job and easier to manage and work with.

Desktop: AMD Athlon XP 2000+ - 1.6ghz | MSI KT4-Ultra Motherboard |ATI Radeon Powercolor x850 XT 256mb DDR3 | 400gb HDD space |1gb PC2700 DDR SDRAM.
Laptop: AMD Sempron 3200+ - 1.6ghz | ATI Radeon Xpress 1100 - 128mb | 100gb PATA HDD | 1gb DDR2 RAM.
jamieoliver22 is offline   Reply With Quote
Old 03-16-2007, 09:49 PM   #3
In Runtime
Daeva's Avatar
Join Date: Dec 2005
Posts: 407
Send a message via AIM to Daeva Send a message via MSN to Daeva Send a message via Yahoo to Daeva
Default Re: mouseover image HTML

when you do something like that, you will want to pre-load the images. If you don't then the user will have to wait to view the mouseover image and the effect will be lost. To do this, you pre-load the images into the browsers cache before the page is even loaded, this will make sure they appear on time. For example:

In the head section of the page we have something that looks like this:
<script type="text/javascript">
var numberOfImages = new Number(12); // this is the number of images you want to 
														// preload
var images = new Array(numberOfImages); // create an array, for easier access to 
														 //the variable names
images[0] = new Image();
images[0].src = "imagepath.gif";
images[1] = new Image();
images[1].src = "imagePath2.gif";
// repeat for as many images as you have (doing it this way is simple, but can get tedious)
That goes in the head section !very important!
The head section of the page is loaded first, because this is where a lot of the information about the page is processed(First the browser looks at what the page is, then it looks at how to display it.)
Next, you'll add the mouseOver on the url for example:
<!-- NOTE, The following code doesn't need to go within a <script> tag //-->
<a href="#" onmouseover="document.imgOne.src=images[0].src;" onmouseout="document.imgOn.src=images[1].src;" title="My Link"><img name="imgOne" id="imgOne" src="imagePath.gif" border="0" /></a>
Thats pretty much all there is to it. You can add different things to it by using the onmouseout, or other events.
Ok, quick explanation of the <a> tag with the javascript.

Whats going on, is you're telling the browser that when the user mouses over the image, onmouseover, change our image object, which is referred to by name, not id in this case, i gave the image a name of imgOne so we say document.imgOne.src= and we set that = to some value. In this case, it's the first image we pre-loaded into our array. If I didn't make anything clear, just let me know. Hope that helps.

in css, you can't really change the image per-se. However you can change the appearance of the link.

in your css you could do this:
<style type="text/css">
color: #6767ef;
text-decoration: none;
background-image: url('urlOfYourImage.gif');
background-position: center;
background-repeat: no-repeat;
color: #ef6767;
text-decoration: none;
background-image: url('urlOfSecondImage.gif');
background-position: center;
background-repeat: no-repeat;
Which, changes the color and background image of the link, creating a "mouseover" type effect. Some user's disable javascript as a security feature, so it's up to you how best to present the page.
**Official Self-proclaimed glorified excessive (insert additional adjectives here) post editor/modifier.
Edit = Best feature ever
Daeva is offline   Reply With Quote
Old 03-18-2007, 03:51 PM   #4
Beta Member
Join Date: Mar 2007
Posts: 4
Default Re: mouseover image HTML

thank you that worked
mayo is offline   Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

All times are GMT -5. The time now is 02:14 PM.

Powered by vBulletin® Version 3.8.8 Beta 4
Copyright ©2000 - 2016, vBulletin Solutions, Inc.
Search Engine Friendly URLs by vBSEO 3.6.0