Image Swap on an Image Map?

**guitarcrazy23** · 01-29-2012 02:43 PM

This is where I am trying to make this work.

On the top of the page, I have an image that is the title of my website and the page links, and I used image maps for the links (obviously). However, I want to make it so that when someone's mouse is over a map (or the link), the link highlights in red. (see the difference between the original image and the highlighted image).

However, I have used many Javascript codes and it doesn't seem like it wants to work. Any help? Thanks!

Here is my code:

<div id="Title and Pages" class="container"><img src="images/title.png" width="1001" height="232" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="602,173,747,220" href="../shop" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/shop.png',1)">
<area shape="rect" coords="40,176,177,219" href="../" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/news.png',1)">
<area shape="rect" coords="216,169,367,218" href="../music" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/music.png',1)">
<area shape="rect" coords="779,175,967,219" href="../contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/contact.png',1)">
<area shape="rect" coords="400,164,574,225" href="../photos" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/photos.png',1)">
</map></div>

**coothead** · 01-30-2012 05:11 AM

Hi there guitarcrazy23,

and a warm welcome to these forums.

This could be better done without an image map and javascript but with CSS.

If that method would be of interest to you let me know and I will code it for you.

In the meantime here is a javascript solution...

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://wyteboyz.com//">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Wyte Boyz</title>

<style type="text/css">
body {
    margin:0;
    background-color:#000;
    background-image:url(images/background.png);
    background-repeat:no-repeat;
    background-position:-80px -9px;
    background-attachment:fixed;
 }
#container {
    width:1000px;
    margin:0 auto;
 }
#container img {
    display:block;
    width:1000px;
    height:232px;
    border:0;
 } 
</style>

<script type="text/javascript">
   var preloads=[];

function preload(){

for(var i=0;i<arguments.length;i++) {
   preloads[preloads.length]=new Image();
   preloads[preloads.length-1].src=arguments[i];
  }
 }
preload('images/news.png','images/music.png','images/photos.png','images/shop.png','images/contact.png');

function init(){
   var ar=document.getElementById('container').getElementsByTagName('area');
for(var c=0;c<ar.length;c++) {
   ar[c].number=c;
ar[c].onmouseover=function() {
   document.getElementById('title').src=preloads[this.number].src;
this.onmouseout=function() {
   document.getElementById('title').src='images/title.png';
    }
   }
  }
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<div id="container">

<img id="title" src="images/title.png" usemap="#map" alt="">
<map name="map" id="map">
 <area shape="rect" coords="40,176,177,219" href="../" alt="">
 <area shape="rect" coords="216,169,367,218" href="../music" alt="">
 <area shape="rect" coords="400,164,574,225" href="../photos" alt="">
 <area shape="rect" coords="602,173,747,220" href="../shop" alt="">
 <area shape="rect" coords="779,175,967,219" href="../contact" alt="">
</map>

</div><!-- end #container --> 

</body>
</html>

coothead

**coothead** · 01-30-2012 09:23 AM

Hi there guitarcrazy23,

I had a little spare time, so coded a CSS navigation for you to try.

Check out the attachment to see the result.

coothead

**guitarcrazy23** · 01-31-2012 09:03 PM

You can see your help in action here!

Thread: Image Swap on an Image Map?

Thread Tools

Display

Hybrid View

Image Swap on an Image Map?

Thanks so much!!!! All the help is greatly appreciated :D

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions