I'm kinda a noob at this... here's my source so far if it helps (I'm using jquery and a image map hilight plugin as well)

HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="css/styleFront.css" type="text/css" />

<script src="javascript/jquery.js" type="text/javascript"></script>
<script src="javascript/jquery.maphilight.js" type="text/javascript"></script>
<script src="javascript/jquery.metadata.min.js" type="text/javascript"></script>

<script>
$(function() {
        $('.box').maphilight();

        });
</script>
<script>
$(document).ready(function(){ $("area.a").mouseenter(function() {$("img.home").fadeIn(100);})});



</script>

</head>

<body>
<div id="wrap">

    <div id="navText"></div>

    <div id="navText1"><img src="images/FrontHome.png" class="home" /></div>
    <div id="navText1"><img src="images/FrontContact.png" class="cont"/></div>
    <div id="navText1"><img src="images/FrontPortfolio.png" class="port"/></div>


<div id="blackBox">
        <img src="images/BlackBoxMain.png" usemap="#blackBox" class="box" />
    <map name="blackBox">
            <area shape="poly" coords="191,180,362,92,362,262,191,350" href="" class="a"/>
            <area shape="poly" coords="19,92,191,180,191,350,19,262" href="" class="b"/>
            <area shape="poly" coords="191,3,362,92,191,180,19,92" href="" class="c"/>
        </map>
    </div>

    <div id="logo">
    <img src="images/FrontLogo.png" />
    </div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body {background:url(../images/BlackBoxBG.png)}

#wrap {
    width: 900px;
    margin: 0 auto;
    text-align:center;
}

img {
    border:none;
}

#navText {
    margin:75px auto;
    width:352px;
    height:118px;
}

#navText1 {
    position:absolute;
    margin:75px auto;
    width:352px;
    height:118px;
    left: 35%;
    top: 0px;
}

#navText1 img {
    opacity:0;
    filter:alpha(opacity=0);
}

#blackBox {
    margin:50px auto;
    width:377px;
    height:356px;
    display:block;
}


#logo {
    margin: 50px auto;
    width: 693px;
    height: 150px;
    background:url(../images/FrontLogo.png);
}

1 answer

0
points

This is an non-jquery answer for your issue. It is a question I responded to on stackoverflow. You should be able to modify it to work for what you need, ie the rollover. Here is the LINK.

Answered over 6 years ago by John Turknett
  • There are also a lot of other answers on that page that do the same thing, obviously; choose what works best for you. John Turknett over 6 years ago