Imagemap im Divtag mit Hover Image

BlackMysteria · 30.01.2010

Heyho,

ich hab ein kleines Problem mit meiner Hauptseite, nachdem ich zwei Divtags für die Navigationsleisten gebaut habe, möchte ich gerne eine imagemap draus machen.

Ich habe irgendetwas bei den Befehlen falsch gemacht, aber was weiß ich leider nicht und ich finde auch keine Antwort via Google, hier im Forum hab ich auch schon gesucht, leider mit mäßigem Erfolg.

Zusätzlich würde ich gerne ein Hover Image einfügen das aktiv wird wenn man mit der Maus über den Bereich der Imagemapkoordinaten fährt. Zugegeben, letzteres hab ich nochnicht gesucht oder ausprobiert, aber dafür benötige ich denke ich ersteinmal eine funktionierende Imagemap. :uhm:

Greez
BlackMysteria

cebito · 30.01.2010

AW: Imagemap im Divtag mit Hover Image

Du musst ihm mit usemap auch sagen, welche map genutzt werden soll:

HTML:

  <img src="Bilder/Navi Oben.png" usemap="#Gallerie">
 <map name="Gallerie">
 <area shape="rect" coords="144,44,230,58"          href="http://www.elementum-septem.com/Gallery" alt="Gallerie" title="Gallerie"></map>

und wozu das p-tag mittendrin? Siehe auch

Edith sagt: Da war noch was. Schau mal hier, da hab ich mal aus Neugier sowas hingebastelt (Rollover)

BlackMysteria · 30.01.2010

AW: Imagemap im Divtag mit Hover Image

Jetzt hats endlich funktioniert, vielen Dank. Jetzt hab ich da allerdings so nen komischen blauen Rand außenrum, kann ich den noch irgendwie wegmachen?

Vielen Dank für die Hilfe, ich war schon am Verzweifeln. Das mit dem Rollover versuch ich dann auch gleich mal

Edit: Okay, habs grad selbst gefunden *facepalm* Sorry... und nochmal danke ^^

Greez
BlackMysteria

BlackMysteria · 31.01.2010

AW: Imagemap im Divtag mit Hover Image

Heyho!

Ich hab das jetzt mit deinem Code zu dem Rollover in einer Imagemap getestet und leider funktioniert es nicht ganz so wie es soll. Scheinbar hat die Imagemap mit dem Code für das Rollover ein Problem mit der Verlinkung.
Irgendwo wird sich wohl wieder ein Fehler eingeschlichen haben, zumal er auch das Rollover garnicht dort zeigt wo er es Zeigen soll.

:X

Dreamweaver sagt mir das der Area Befehl nicht gültig ist, allerdings nur wenn das Javascript dabei steht. Ohne den Rollover und das Javascript funktioniert die Verlinkung Problemlos. Muss ich die Verlinkung vielleicht woanders hin schreiben?

Greez
BlackMysteria

sokie · 31.01.2010

AW: Imagemap im Divtag mit Hover Image

dein Code wäre eine Hilfe, dein Problem besser zu verstehen "Rollover" ist kein begriff mit dem man ohne code etwas anfangen kann. soll der rollover dazu genutzt werden eine grafik auszutauschen, geht das natürlich mit dem dem area nicht. bilder können nur in einem <img> ausgetauscht werden.

cebito · 31.01.2010

AW: Imagemap im Divtag mit Hover Image

Erstmal müsstest du dein Hoverbild richtig positionieren, Kann ja nicht sein, das du ihm die gleichen Größen- und Positionswerte gibst wie dem Div in dem es sich befindet. Die zweite map kannst dir sparen, die war in meinem Beispiel nur, weil der Bereich rund ist.

Aber ehrlich gesagt, könntest du es einfacher haben, wenn du einfach die Bilder hinpositionierst und diese verlinkst, ohne map.

BlackMysteria · 31.01.2010

AW: Imagemap im Divtag mit Hover Image

Heyho!

Ööhm, ja, aber dem Hover muss man doch eine Position zufügen? Das Rollover-Image soll sich ja quasi auf das Image drüberlegen, deswegen benötige ich doch die selbe Position?
Ich möchte ja quasi das die Buttons wenn man mit der Maus über sie fährt optisch hervorgehoben werden. Da die Navigationsleiste allerdings ein Bild aus drei Elementen die in drei verschiedene Richtungen linken sein soll, brauche ich dafür dann quasi eine Imagemap damit sich das Bild nur verändert wenn die Maus über den Bereich geschoben wird. Also ein Rollover nur mit einem zugewiesenen Rechteck. Es ist irgendwie ein wenig kompliziert da sich die Veränderung ja nur auf den Bereich der grauen Schrift zeigen soll. :uhm:

Ich könnte Quasi auch die Bilder einzeln machen und dann einzeln Positionieren und dann ohne Imagemap eine Verlinkung mit Rollover drüber legen? Das wäre natürlich auch eine Idee....:hmpf: Also das werde ich auf jeden Fall versuchen wenn sich keine Lösung für die Kombination aus Div, Rollover und Imagemap findet.

Jetzt hätte ich aber noch eine Verständnis Frage: Es ist quasi nicht möglich in einem Bild einen Bereich zu definieren fürden sich das Image ändert und der gleichzeitig noch auf eine andere Seite verlinkt wenn man drauf drückt?

Greez
BlackMysteria

Der Code: (Einige Sachen habe ich nochnicht fertig verlinkt, primär konzentriere ich mich gerade auf das Funktionieren der Gallerieverlinkung)

oder

Code:

<!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=iso-8859-1" />
<title>Elementum Septem</title>
<style type="text/css">





<!--
body {
    background-image:url(Bilder/NewHPProject5.gif);
    background-repeat: no-repeat;
    background-position: center 0;
    background-color:#000000;
}

#map {
position:absolute; 
left: 50%; 
width: 382px; 
margin-left: -191px; 
margin-top:200px; 
background:none;
}
#rahmen {
position:absolute;
margin-top:200px;
left:50%;
margin-left: -191px;
width:382px;
visibility:hidden;
}


-->
</style>

<script type="text/javascript">
<!--
function zeigeRahmen() {
document.getElementById("rahmen").style.visibility = "visible";
}
function verbergeRahmen() {
document.getElementById("rahmen").style.visibility = "hidden";
}
-->
</script>

</head>

<body>

<div id= "map">
  <img src="Bilder/Navi Oben.png" border="0" usemap="#Gallerie" >
   <map name="Gallerie">
    <area shape="rect" coords="144,44,230,58" onmouseover=javascript:zeigeRahmen() alt="" >
    </map>
    <img src="Bilder/Navi Oben Gallerie Hover.png" id="rahmen" border="0" usemap="#GallerieHover" />
<map name="GallerieHover">
    <area shape="rect" coords="144,44,230,58" onmouseout=javascript:verbergeRahmen() alt="">
    </map>

</div>


<div style= "position: absolute; left: 50%; width: 382px; margin-left: -191px; margin-top:440px; border:0px; background:none; ">
  <img src="Bilder/Navi Unten.png" border="0" usemap="#NaviUnten" >
  <map name="NaviUnten">
  <area shape="rect" coords="167,44,210,58"
  href="http://www.elementum-septem.com/Blog" alt="Blog" title="Blog" >
  
  
  <area shape="rect" coords="273,45,333,59"
  href="http://www.youtube.com/user/BlackMysteria" alt="Video" title="Video" >
  
  
  <area shape="rect" coords="34,41,101,60"
  href="" alt="Foren" title="Foren" >
  
  </map>
  </div>


</body>
</html>