Img replacement onMouseOver - how do you do this?

[Felix]

I would like to display an image. When one hovers the mouse over the image, another image is displayed, thus the image switches when the mouse hovers over and off the image area. This way I want to build an image map based menu which displayes the menu items only when the mouse hovers over it.

Can this be done with HTML only? if yes, how?

If Javascript is required, what is the script?

Any help is highly appreciated! TIA

Felix

[Nutrocker]

Hi Felix

You mean like my navigation buttons on my homepage (see below)?

Check the source code and grab what ya want e-mail me if you wish.




------------------
Regards
Don

http://www.nutrocker.co.uk

[reboot]

Everything you need is at www.dynamicdrive.com

------------------
Who needs a life?, I have internet!
Cheers, Jim
Jim & Sue's Free Files | Jims Modems

[Felix]

Reboot, I've searched dynamicdrive already and have found several pretty things but not this I'm looking for.

Nutrocker, yes, it's something like this. But, your menu is made from several pictures, each of them carrying a link. I like to use one single picture, the links embedded in a image map. Like this:

(default image)


(OnMouseOver image)


The version of the website up and running at the time has no navigation functions in the logo. You can look here if you want.


In other words:
The OnMouseOver effects I've seen so far do work with images that are links.

I'm looking for a way to implememt the OnMouseOver effect just for an image that is no link (the links are done separately with the image map).



[This message has been edited by Felix (edited 05-26-2000).]

[Nutrocker]

Hi

Have I got this right?

So the the second image above is going to be the new logo complete with text image and you want to image map each text link to a page?

Or

You want the text links to appear on mouse over and then image map each text link to a page?

What HTML editor's have you got? Dreamweaver 3 would make either of these a doddle

Or there are some good tutorials on how to do this via manual html/dhtml.

I'll be back.


------------------
Regards
Don

http://www.nutrocker.co.uk

[Nutrocker]

Image map tutorials
http://www.kasparius.com/nonflash/tutorial/tutneed.htm
http://www.dtp-aus.com/im-map.htm

Macromedia Fireworks image map tutorial http://www.irt.org/articles/js186/index.htm
http://www.whywhat.com/html/map.htm
http://www.journalism.sfsu.edu/mm/imap/
http://cp.gis.net/techinfo/imagemaps/index.html

I could find lots more



------------------
Regards
Don

http://www.nutrocker.co.uk

[Felix]

So the the second image above is going to be the new logo complete with text image and
you want to image map each text link to a page?

Yes, that's exactly what I want to do. In the meantime I did it! The trick was to make an anchor with an empty link < a href="" > and add the onMouseOver stuff. Then the img can be mapped as usual.

Unfortuantely I can't show it to ya by now but here's the code:

code:

---

<SCRIPT LANGUAGE="JavaScript">

{

browser = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) | | ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 3 )))



if ( browser) {

 imgon = new Image(576,68);

 imgon.src = "../bilder/fmslogo_d.gif";

 imgoff = new Image(576,68);

 imgoff.src = "../bilder/fmslogo.gif";

}

}



  function SwitchImg(imgDocID,ImgObjName)

  { if ( browser)

  document.images[imgDocID].src = eval(ImgObjName + ".src")

  else if ( browser)

  document.images[imgDocID].src = eval(ImgObjName + ".src")

  }

</SCRIPT>





<MAP NAME="NavMap">

<AREA SHAPE="RECT" HREF="welcome_d.htm" ALT="Home" COORDS="2,13, 33,27">

<AREA SHAPE="RECT" HREF="news/news_d.htm" ALT="News" COORDS="35,13, 70,27">

<AREA SHAPE="RECT" HREF="webtension/webtension_d.htm" ALT="Bahnzugmessung" COORDS="73,13, 165,27">

<AREA SHAPE="RECT" HREF="webguide/webguide_d.htm" ALT="Bahnlaufregelung" COORDS="167,13, 258,27">

<AREA SHAPE="RECT" HREF="beltscales/beltscales_d.htm" ALT="Bandwaagen" COORDS="260,13, 330,27">

<AREA SHAPE="RECT" HREF="support/support_d.htm" ALT="Service" COORDS="2,29, 43,44">

<AREA SHAPE="RECT" HREF="contact/contact_d.htm" ALT="Kontakt" COORDS="45,29, 87,44">

<AREA SHAPE="RECT" HREF="salesoffices/salesoffices_d.htm" ALT="Niederlassungen" COORDS="89,29, 176,44">

<AREA SHAPE="RECT" HREF="misc/sitemap_d.htm" ALT="Site Map" COORDS="178,29, 226,44">

</MAP>

<A HREF="" onMouseOver="SwitchImg('imgFmslogo','imgon'); return true;" onMouseOut="SwitchImg('imgFmslogo','imgoff'); return true;"><IMG SRC="../bilder/fmslogo.gif" USEMAP="#NavMap" WIDTH=576 HEIGHT=68 ISMAP ALT="FMS Force Measuring Systems AG - Produkte für die Automation an laufenden Bahnen." NOSAVE BORDER="0" NATURALSIZEFLAG="0" NAME="imgFmslogo"></A>



[/code]



Thank you vor all the help!   







[This message has been edited by Felix (edited 05-29-2000).]
		

[Rick Hall]

I have just recently completed a small web site for a customer, and I use the rollover option for the gaphics in the table at the bottom of the page. You can take a look at how it is done here.... http://pages.infinit.net/cjs

------------------
Rick

>> -- <<
The solutions to todays problems,
Are the problems of tomorrow.

RH WebWorx - Site Creators