2nd Image on Mouseover

[Newb]

I've been doing a lot of HTML coding recently, and haven't had much difficulty finding what I've wanted. However, I've been searching the last few days for a specific image mouseover code, and I can't seem to find it in HTML format - only in Javascript.

I currently have an image of a flat panel monitor on one of my sites, and I want the monitor's specs to be displayed on mouseover. I don't want the image of the monitor to be replaced by the specs - instead, I'd like the specs to simply float over the image.

Could someone write out the necessary code for this action and use image locations that make it obvious which is the image prior to mouseover, and which is on mouseover.

Thanks.

[Wedgy]

First I'd have a separate CSS file, called specs.css or something clever.
put in it some code like this:

/*==================== text title (not specs) ===*/

/* this name will appear like a bar below the picture */

/* a nice area to play in first */
DIV#monitor { Z-INDEX: 100; 
	FONT: 16px Verdana,sans-serif; 	
	WIDTH: 95%; HEIGHT: 500px;
	POSITION: absolute; LEFT: 20px; TOP: 20px;}

/* bar with title above (or below) picture */
DIV#monitor A { DISPLAY: block; 
	BORDER: 0px;  PADDING: 5px; MARGIN: 0px ;   
	WIDTH: 160px; 	 /*width of bar */
	COLOR: white; BACKGROUND: black;  
	FONT: bold 1em sans-serif;TEXT-ALIGN: center; 
	TEXT-DECORATION: none ;}

DIV#monitor A:hover {COLOR: black; BACKGROUND: #aa99c5; 
	WIDTH: 160px; }

/*============ MENU TEXT GIF parameters =====*/
/* this will control the appearance of a gif pic with text overtop */

/* no mouseover: invisible (zero height) */
DIV#monitor A IMG {BORDER: 0px;  Z-INDEX: 100; 
	WIDTH: 800px;   HEIGHT: 0px;  
	POSITION: absolute; LEFT: 10px; TOP: 30px; } 

/* mouseover: visible (change height to actual size) */
DIV#monitor A:hover IMG {	BORDER: 0px; Z-INDEX: 100;   
	WIDTH: 800px; HEIGHT: 120px ; 
	POSITION: absolute; LEFT: 10px; TOP: 30px; }

/*============= monitor image (doesn't change)== */
/* if image is placed outside of DIV for mouseover, 
   you may have to adjust height to align it. */

DIV#monimage { WIDTH: 160px; HEIGHT: 120px  ;
	POSITION: absolute; LEFT: 10px; TOP: 30px; }

Now in your webpage put this in the HEAD section:

<!--========================= stylesheet ===-->
<link rel="stylesheet" type="text/css" href="specs.css" >

And add this to the body:

<img id=monimage src="monimage.jpg" alt="">

<!--============== make text appear on mouseover of label ==-->
<DIV id=monitor>
<a href="">Monitor Name<img src="montext.gif"/></a>
</DIV>

Alter the colors to taste.
You'll have to create a gif file that has an invisible background color
for the text, called montext.gif.

[Newb]

Thanks, that helps a lot.

One more question - I don't have my own server, so I upload all of my images to image hosts and input the generated URL's into <img src=""> tags. Where can I find a site that hosts CSS files? - I need the URL/location of the CSS file for the <------stylesheet------> code.

[Wedgy]

I've never heard of 'hosting' CSS files.
Usually you just save it as a text file in the same directory/folder as the page that will import it or call upon it. So your URL will be 'relative' i.e., short, and not a full address:

"http://somelocation/folder/myfile.css" would be a full path/filename.

"myfile.css" would be a relative (local to the current folder of the webpage) address.

So you upload your webpage (via an HTP copying/uploading program)
to your webpage host (server) into your public root folder, along with the css file too. Your folder should look something like:

..
mywebpage.html
mystylesheet.css

There should not be any need for a special host/server site for css pages.
This would also make things incredibly slow on the internet.
(if every webpage had to access multiple servers just to load!)