Bei Mouseover Grafik anzeigen

K

kroete1980

Grünschnabel
Hallo
ichbin neu hier und habe folgendes Problem.

Auf einem Imagemap liegen verschiedene Links, die ein popup öffnen.

Ich möchte dass die Areas wo die Links liegen durch eine Grafik hervor gehoben werden, das heisst, wenn ich über einen definierten Area fahre sich eine kleine Grafik bei dem Mauszeiger öffnet. beim verlassen des Areas soll sie sich wieder schliessen. Eben kein kompletter Bildwechsel. Die User sollen so besser rekenn das sich da was verbirgt.

so sieht das momentan aus

<html>
<head>
<script language="JavaScript">
<!--

function popup(name,width,height,directories,toolbar,location,menubar,scrollbars,status,resizable,dependent,fullscreen)
{
var einstellungen;
einstellungen="width="+ width +",height="+ height +",directories=" + directories +",toolbar="+ toolbar +",location="+ location +",menubar="+ menubar +",scrollbars="+ scrollbars +",status="+ status +",resizable="+ resizable +",dependent="+ dependent +",fullscreen="+ fullscreen;
window.open('',name,einstellungen);
}
//-->
</script>
</head>


<body bgcolor="#669900" text="#FFCC66" link="#990000" vlink="#990000" alink="#FFCC66" style="font-family: Verdana; font-size: 10pt">

<map name="FPMap0">
<area href="pop1.html" target="popupname" coords="328, 91, 376, 115" shape="rect" onmouseover="MouseOver(little.gif)" onclick="javascript: popup('popupname','340','260','no','no','no','no','no','no','no','no','no')"></map><img border="1" src="Karte.jpg" usemap="#FPMap0" width="625" height="393"></p>
</body></html>

Funktioniert aber net, irgendwas hab ich glaub ich vergessen. Google hat mir leider auch nicht weiter geholfen. Was ist da falsch?

Grüße, Kröte
 
Meinst du
Code: 
onmouseover="MouseOver(little.gif)"
.... und wo ist die Funktion dazu.... es gibt keine vordefinierte JS-Funktion "MouseOver()" ... die musst du schon selbst schreiben.

Suche mal hier im Board nach "Tooltip"... da solltest du entsprechende Dinge finden.
 
Hey Sven

Ok, ich hab es jetzt soweit dass sich beim Mouseover eine zweite grafik öffnet, aber neben dem bild und ich möchte es ja quasi auf dem Bild haben, also genau da wo auch der link ist. Wie kann man denn den Bereich definieren wo sich die Grafik öffnen soll?

Sorry, fange grad erst an mit JS

Grüße, Kröte
 
Die aktuelle Position erfährst du über die Eigenschaften offsetTop/offsetLeft des jeweiligen Elementes(also in deinem Beispiel des Linkes)

Wie du die Position deinem Bild zuordnest, kann ich dir nur sagen, wenn du die Funktion postest, mit welcher du das Bild öffnest.
 
Aber bitte nicht lachen... so sieht es jetzt aus...

<html>

<head>

<style fprolloverstyle>A:hover {color: #FFFF00; font-weight: bold}</style>
<script language="JavaScript">
<!--
function popup(name,width,height,directories,toolbar,location,menubar,scrollbars,status,resizable,dependent,fullscreen)
{
var einstellungen;
einstellungen="width="+ width +",height="+ height +",directories=" + directories +",toolbar="+ toolbar +",location="+ location +",menubar="+ menubar +",scrollbars="+ scrollbars +",status="+ status +",resizable="+ resizable +",dependent="+ dependent +",fullscreen="+ fullscreen;
window.open('',name,einstellungen);
}
//-->

<!--

function auf(bildertausch) {


if (document.all) {
document.all[bildertausch].style.visibility="visible";
}

if (document.layers) {
document.layers[bildertausch].visibility="visible";
}
}

function zu(bildertausch) {


if (document.all) {
document.all[bildertausch].style.visibility="hidden";
}

if (document.layers) {
document.layers[bildertausch].visibility="hidden";
}
}

//-->

</script>
</head>






<p align="center"><map name="FPMap0">
<area href="pop1.html" target="popupname" coords="328, 91, 376, 115" shape="rect" onmouseover="javascript:auf('bild4')"
onmouseover="auf('bild4')" onmouseout="zu('bild4')" onclick="javascript:popup('popupname','340','260','no','no','no','no','no','no','no','no','no')"></map><img border="1" src="Karte.jpg" usemap="#FPMap0" width="625" height="393"></p>




<div id="bild4" class="bild4">
<img src="little.gif" alt="" width="32" height="32"></div>

</body></html>
 
Hallo Sven

nein es soll immer die gleiche Grafik erscheinen, damit der User weiss, dass sich dort ein Link befindet. Also wenn er mit der Maus über einen bestimmten Area kommt soll die Grafik erscheinen. Bei nem anderen area auch wieder die gleiche Grafik, immer am Mauszeiger...

Grüße
Kröte
 
Das vereinfacht die Sache ja enorm :-)

Das Skript: (damit es korrekt funktioniert, muss der Browser im Quirks-Mode laufen)
Code: 
   <script type="text/javascript">
   <!--
   function ico_init(e)
   {
       objEvent=(window.event) ? window.event: e;
       objTarget=(window.event) ? objEvent.srcElement :objEvent.target;
       return((objTarget.tagName=='AREA')? 1 : 0);
   }
 
   function ico_on(e)
   {
   if(ico_init(e))
       {
           document.ico.style.visibility='visible';
 document.ico.style.left=((window.event)? objEvent.clientX + document.body.scrollLeft : objEvent.pageX)-parseInt(document.ico.width);
 document.ico.style.top=((window.event)? objEvent.clientY + document.body.scrollTop : objEvent.pageY)-parseInt(document.ico.height);
       }
   }
   
   document.onmouseover=ico_on;
   document.onmouseout=new Function('F','document.ico.style.visibility="hidden"');
   //-->
   </script>

Das Bild selbst...
Code: 
   <img src="little.gif" width="32" height="32"style="visibility:hidden;position:absolute;"name="ico">
...das ist alles, in den <area>'s selbst musst du nix notieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück