✔ Hotspot Verlinkungen in einem Bild extern anzeigen

Bertel007 · 20. November 2008

Hiho,

ich möchte von einem Bild wo mehrere Hotspot Verlinkungen sind iin einem iFrame anzeigen lassen

wobei ich es so haben wollte sobald man mit der Maus auf die Hotspot Verlinkung kommt dieser Sofort angezeigt wird ohne erst drauf klicken zu müssen.

Habe hier schon eine weile mittels SuFu nachgeschaut aber nicht das richtige gefunden wo ich benötige.

Sven Mintel · 20. November 2008

Moin,

füge folgendes in den <head> ein:

Javascript:

<script type="text/javascript" >
function klick(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  {
    if(o.tagName=="AREA"){window[o.target].location=o.href;}
  }
}
</script>

in das <map> -Element packe Folgendes:

Code:

onmouseover="klick(event)"

die "Hotspots" benötigen dann halt das href-Attribut(Linkziel) und ein target-Attribut(Name des iframes)

Bertel007 · 20. November 2008

Danke für die schnelle Info

aber irgendwie stelle ich mich heute bisserl komich an

bekomme es net so hin bzw verstehe es grad eben net richtig

habe mal unten den Kompletten Code eingefügt

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=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" >
function klick(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  {
    if(o.tagName=="AREA"){window[o.target].location=o.href;}
  }
}
</script>
</head>

<body>
<div align="center">
  <p><img src="Dokumente/Maennerballet.jpg" width="620" height="360" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="circle" coords="75,96,31" href="test2.html" target="_parent" />
      <area shape="circle" coords="168,45,35" href="#" />
        <area shape="circle" coords="234,105,40" href="#" />
      <area shape="circle" coords="280,223,2" href="#" />
        <area shape="circle" coords="334,92,37" href="#" />
      <area shape="circle" coords="412,104,35" href="#" />
        <area shape="circle" coords="456,44,33" href="#" />
      <area shape="circle" coords="561,71,38" href="#" />
      </map>
</p>
  <p>&nbsp;</p>
</div>
<center>
<p>&nbsp;</p>
<iframe  style="border:0px #FFFFFF groove;" name="Test" scrolling="auto" frameborder="1" align=aus marginheight="0px" marginwidth="0px" height="100" width="300"></iframe>
</center>
</body>
</html>

Maik · 20. November 2008

Hi,

du warst schon kurz vor der Ziellinie

Code:

<map name="Map" id="Map" onmouseover="klick(event)">

Code:

<area shape="circle" coords="75,96,31" href="test2.html" target="Test" /><!-- target="Name_des_iFrames" -->

mfg Maik

Bertel007 · 21. November 2008

super hat geklapt

Danke euch

aber eine Frage hätte ich noch

wäre es möglich am Anfang eine Seite anzeigen zu lassen mit nem Hinweis das man einfach über eine Person mit der Maus auf dem Bild fahren soll sobald man ja mit der Maus über die Person fährt wird das Ergebnis in dem iframe angezeigt und sobald man wieder runtergeht sollte wieder die Anfangsinformation zu sehen sein

immoment ist es so das die letzte mit der Maus überfahrende Person ich meine dann die Information zu sehen ist

Quaese · 21. November 2008

Hi,

du könntest Svens Script dahingehend erweitern, dass für den Fall, dass das auslösende Element keine AREA ist, ein Standarddokument angezeigt wird.

Code:

function klick(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  {
    if(o.tagName=="AREA"){
      window[o.target].location=o.href;
    }else{
      window["NameDesIframes"].location = "standarddokument.html";
    }
  }
}

Ciao
Quaese

Bertel007 · 21. November 2008

irgendwie haut das nicht

PHP:

<!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>Test Hotspot in iFrame Anzeigen</title>
<script type="text/javascript" >
function klick(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  {
    if(o.tagName=="AREA"){
      window[o.target].location=o.href;
    }else{
      window["iframe1"].location = "test_basis.html";
    }
  }
}
</script>
<style type="text/css">
<!--
.Stil1 {color: #990000}
-->
</style>
</head>

<body>
<div align="center">
  <p>TEST</p>
  <p><img src="Maennerballet.jpg" width="620" height="360" border="0" usemap="#Map" />
    <map name="Map" id="Map" onmouseover="klick(event)">
      <area shape="poly" coords="2,355,2,153,32,140,50,117,53,77,72,62,87,66,93,72,99,80,98,91,100,100,82,155,96,165,99,180,111,206,114,230,110,255,113,276,111,352" href="test1.html"  target="iframe1" />
      <area shape="poly" coords="264,92,248,68,229,63,215,75,207,92,205,110,210,120,207,148,152,175,120,248,127,275,154,274,155,351,324,354,331,332,328,281,319,220,271,157,255,144" href="test3.html" target="iframe1" />
      <area shape="poly" coords="351,355,368,280,341,256,335,217,348,179,359,154,396,131,389,106,391,78,402,63,419,58,433,66,440,86,441,106,436,130,451,136,470,146,482,156,491,180,496,215,504,253,497,284,485,315,470,326,469,353" href="test5.html" target="iframe1" />
      <area shape="poly" coords="519,356,514,311,518,235,521,177,545,110,531,71,537,50,553,39,570,38,585,51,583,98,615,112,613,347" href="test7.html" target="iframe1" />
      <area shape="poly" coords="86,152,107,101,135,71,131,21,162,5,175,12,183,26,185,41,181,68,205,86,200,112,203,141,179,156,153,168,123,229" href="test2.html" target="iframe1" />
      <area shape="poly" coords="328,227,293,181,277,153,269,137,286,123,300,123,320,119,311,98,309,68,324,59,336,59,351,69,355,86,352,112,364,119,378,129,355,154" href="test4.html" target="iframe1" />
      <area shape="poly" coords="443,127,446,106,443,91,441,70,435,52,431,39,435,19,450,12,465,16,472,26,477,39,474,53,470,79,472,87,482,96,502,93,521,96,532,95,538,106,538,120,527,131,524,144,519,156,517,174,516,192,512,209,496,181,488,157,472,140" href="test6.html" target="iframe1" />
    </map></p>
</div>
<center>
<p align="center">
  <iframe  name="iframe1" width="300" marginwidth="0px" height="100" marginheight="0px" align=aus scrolling="auto" frameborder="5" id="iframe1" style="border:0px #FFFFFF groove;"></iframe>
  </a></p>
</center>
</body>
</html>

Quaese · 21. November 2008

Hi,

ja, kann nicht funktionieren - ausser im IE - da hab ich wohl nicht aufgepasst.

Versuche stattdessen mal folgendes.

Scriptbereich:

Code:

function klick(e)
{
  o=(window.event)?window.event.srcElement:e.target;
  {
    if(o.tagName=="AREA"){
      window[o.target].location=o.href;
    }
  }
}

function noklick(e){
  window["iframe1"].location = "test_basis.html";
}

HTML:

Code:

<map name="Map" id="Map" onmouseover="klick(event)" onmouseout="noklick(event);">

Ciao
Quaese

Bertel007 · 21. November 2008

das klapt

aber ne kleinigkeit ist halt noch was

wenn man diese Seite aufbaut bleibt erstmal alles weiß

aber nach dem ersten überfahren des HotSpots mit der Maus läd er erst dann die test_basis.html in das iFrame rein

aber immerhin so gefält mir dad schon

Ich Danke euch für die Hilfe recht Herzlich

Quaese · 21. November 2008

Hi,

gib die gewünschte Seite im src-Attribut des iFrames an.

Code:

<iframe src="test_basis.html"  name="iframe1" width="300" marginwidth="0px" height="100" marginheight="0px" align=aus scrolling="auto" frameborder="5" id="iframe1" style="border:0px #FFFFFF groove;"></iframe>

Ciao
Quaese

✔ Hotspot Verlinkungen in einem Bild extern anzeigen

Bertel007

Grünschnabel

Sven Mintel

Mitglied

Bertel007

Grünschnabel

Maik

Bertel007

Grünschnabel

Quaese

Moderator

Bertel007

Grünschnabel

Quaese

Moderator

Bertel007

Grünschnabel

Quaese

Moderator

Neue Beiträge