Avatar billede mbl Juniormester
19. juli 2002 - 11:29 Der er 3 kommentarer og
1 løsning

hotspot med billedvisning

Jeg har følgende kode eks. Er det muligt at skifte teksten "En fisk" ud med et hotspot område på "billed.gif". DVS at hvis jeg har et billed af et hus med vinduer og en døre, skal det værer sådan at når jeg sætter musen over vinduerne skal billedforklaringen komme frem "som hvis jeg havde sat musen over "En fisk". Der skal ikke være hyperlink på hotspotten.


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body>
<p><map name="FPMap0"><area " shape="rect" coords="142, 109, 289, 164">
<area href="http://" shape="rect" coords="132, 59, 320, 140">
</map><img border="0" src="billed.gif" width="459" height="242" usemap="#FPMap0"></p>

<div id="Layer1" style="position: absolute; left: 477; top: 12; width: 106; height: 61; z-index: 1; background-color: #993300; layer-background-color: #993300; visibility: hidden; border: 1px none #000000">&nbsp;
  <table border="1" width="100%">
    <tr>
      <td width="100%">
        <p align="center"><font color="#FFFFFF"><b><i>En fisk</i></b></font></td>
    </tr>
    <tr>
      <td width="100%">
        <p align="center"><img border="0" src="file://Server1/SNDWeb/iLON/Billeder/SND.jpg" width="69" height="36"></td>
    </tr>
  </table>
</div>
<p><a href="#" onMouseOver="MM_showHideLayers('layer1','','show')" onMouseOut="MM_showHideLayers('layer1','','hide')">FPMap0</a></p>
 
  <div id="Layer2" style="position: absolute; left: 355; top: 268; width: 206; height: 161; z-index: 1; background-color: #993300; layer-background-color: #993300; visibility: hidden; border: 1px none #000000">
    <table border="1" width="100%" height="59">
      <tr>
        <td width="100%" height="28">
          <p align="center"><font color="#FFFFFF">Billed 2</font>
        </td>
      </tr>
      <tr>
        <td width="100%" height="19"></td>
      </tr>
    </table>
</div>
<p><a href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')">fisk link 2</a></p>
 
  <div id="Layer3" style="position: absolute; left: 142; top: 257; width: 188; height: 152; z-index: 1; background-color: #993300; layer-background-color: #993300; visibility: hidden; border: 1px none #000000">
    <table border="1" width="100%" height="141">
      <tr>
        <td width="100%" height="35">
          <p align="center"><font color="#FFFFFF" size="5"><b>Billed 1</b></font>
        </td>
      </tr>
      <tr>
        <td width="100%" height="94">
          <p align="center"><img border="0" src="file://Server1/SNDWeb/iLON/Billeder/SND.jpg" width="178" height="94"></td>
      </tr>
    </table>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;</div>
<p><a href="#" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')">fisk link 3</a></p>
 
</body>
</html>
Avatar billede schaefner Juniormester
19. juli 2002 - 11:47 #1
<map name="Map">
<area shape="circle" title="Tekst" coords="170, 40, 30">
</map>
<img border="0" src="billede" usemap="#Map">
Avatar billede schaefner Juniormester
19. juli 2002 - 11:49 #2
<map name="FPMap0">
<area shape="rect" title="tekst" coords="142, 109, 289, 164">
<area shape="rect" title="tekst 2" coords="132, 59, 320, 140">
</map>
Avatar billede jakoba Nybegynder
19. juli 2002 - 11:53 #3
dine <area skal have en href= attribut selvom du ikke bruger den
sæt en  onclick="return false;" ind for at undgår dit <area (eller et alm <a lin) virker som link.
og sæt helt almindelige mouseovers i dine <area'er

<p><map name="FPMap0">
  <area href="" " shape="rect" coords="142, 109, 289, 164"
    onclick="return false;"
    onMouseOver="MM_showHideLayers('Layer2','','show')"
    onMouseOut="MM_showHideLayers('Layer2','','hide')"
  >
  <area href="http://" shape="rect" coords="132, 59, 320, 140"
      onMouseOver="MM_showHideLayers('Layer1','','show')"
      onMouseOut="MM_showHideLayers('Layer1','','hide')"
  >
</map><img border="0" src="billed.gif" width="459" height="242" usemap="#FPMap0"></p>

PS: de to <area du har ovenover rager indover hinanden, det bør undgås.

mvh JakobA
Avatar billede jakoba Nybegynder
19. juli 2002 - 13:26 #4
Ups. der er da en " formeget i den øverste <area kommando, det skal være:
  <area href="" shape="rect" coords="142, 109, 289, 164"
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester