Bild mit Hotspots und Mouseover-Befehl?

obsti · 01.03.2005, 08:05

Hallo!
Ich habe folgendes Problem:
Ich habe ein Bild mit mehreren Hotspots. Hat jemand eine Ahnung, wie der Befehl heisst, wenn ich mit der Maus über ein Hotspot gehe, dass an einer anderen Stelle der selben Seite ein Bild erscheint!

Danke schon mal im voraus!
Gruß
Ralf

321 · 01.03.2005, 11:19

HTML-Code:

<html><head>
<title>on mouseover Bild anzeigen</title>
<script language="JavaScript">
<!--
if(document.images) {
Bild0 = new Image();
Bild0.src = "http://www.traum-projekt.com/forum/images/smilies/confused.gif";
// verwende für Bild0 evt. einen Platzhalter (transparentes gif)
Bild1 = new Image();
Bild1.src = "http://www.traum-projekt.com/forum/images/smilies/smile.gif";
Bild2 = new Image();
Bild2.src = "http://www.traum-projekt.com/forum/images/smilies/rolleyes.gif";
Bild3 = new Image();
Bild3.src = "http://www.traum-projekt.com/forum/images/smilies/cool.gif";
Bild4 = new Image();
Bild4.src = "http://www.traum-projekt.com/forum/images/smilies/tongue.gif";
Bild5 = new Image();
Bild5.src = "http://www.traum-projekt.com/forum/images/smilies/sick.gif";
}
function Wechsel(Bild){
if(document.images) {
window.document.images.dasBild.src = Bild.src;
}}
//-->
</script>
<style type="text/css">
#welcometext 	{ position: absolute; top: 20; left: 40;
		  width: 360px; height: 100px;
		 }

#navi 		{ position: absolute; top: 140; left: 20; 
		 }

#bildanzeige	{ position: absolute; top: 20; right: 20; width: 360; text-align: center  
		 }
</style>
</head>
<body>
<div 	id="welcometext">
	<h2>on MouseOver</h2>
	<br>
	<h3>Bild anzeigen</h3>
</div>
<div 	id="navi"><h4>Nimm an, die Links hier seien Deine Hot-Spots
	Wichtig sind ja nur die Links.</h4>
<br>
<a class=link href="#" title="Smiley 1"
	onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild1)">(1)</a>
<br><br>
<a class=link href="#" title="Smiley 2"
	onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild2)">(2)</a>
<br><br>
<a class=link href="#" title="Smiley 3"
	onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild3)">(3)</a>
<br><br>
<a class=link href="#" title="Smiley 4"
	onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild4)">(4)</a>
<br><br>
<a class=link href="#" title="Smiley 5"
	onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild5)">(5)</a>
</div>

<div 	id="bildanzeige">
<img 	name=dasBild src="http://www.traum-projekt.com/forum/images/smilies/confused.gif" border=0>
</div>
</body></html>

noch nie war er so nützlich ... mein HTML-Tester!

obsti · 01.03.2005, 11:30

Super!
Hat geklappt!
Wenn man den Quellcode anschaut, ist es doch gar nicht mal so schwer!
Nochmals vielen Dank für Deine Arbeit! Hoff ich kann mich mal irgendwie revangieren!
Gruß
Obsti

321 · 01.03.2005, 12:26

Zitat:

Zitat von obsti

Wenn man den Quellcode anschaut, ist es doch gar nicht mal so schwer!

Tja, meistens beim Anschaun!

Aber ist wirklich halb so wild, habs aus einer Seite raus geschnippselt.

obsti · 01.03.2005, 12:36

Jetzt hab ich doch noch eine Frage:
Ich habe es jetzt geschafft mit den Bildern, möchte jedoch zu jedem erscheinenden Bild rechts noch einen Text hinzuschreiben, der bei jedem Bild natürlich anders ist! Es sind verschiedene Personen, wo man einen Namen und die Tätigkeit hinzuschreibt. Ich mache grad eine HP für ein Autohaus!

obsti · 01.03.2005, 12:38

und noch eine dazu! wenn ich die seite zum ersten mal aufrufe ist das Bild0 als kasten mit x. erst wenn ich über einen kopf fahre, kommt danach das bild0 zum sehen. kann ich das auch noch änder?

321 · 01.03.2005, 13:15

Text dazu:

<div id="bildanzeige">
<img name=dasBild src="" border=0> <br>
<span id="textzumbild"> </span>
</div>

Wenn Du ein Bild wechselst, musst Du mit
document.all.textzumbild.innerText = text0;
auch den Text ändern.

Lies auch über innerHTML bei selfhtml Dann könntest auch Formattierungen mit geben in den Texten.

Im Script bei den Bildern auch die Texte definieren:

text0 = " ";
text1 = "die Lächelnde"
usw.

betr. x am Anfang: Schau noch mal! Du musst bei <img src="xxxx.xxx" angeben wie bei bild0. Habs korrigiert, aber Du warst schneller!

PS geht auch mit rel. Pfad ohne http://

obsti · 01.03.2005, 14:34

Also das mit dem roten X hab ich geschafft! Danke! Das mit dem Text hab ich jetzt nicht so kapiert! Vor allem, wo muss ich das hinschreiben! in den Head, body? zu den Bildern?

obsti · 01.03.2005, 14:52

Hier mal mein Quelltext: Das wesentliche ist fett!

<html><head>
<title>Alpspitz-Team</title>
<script language="JavaScript">

</script>
<style type="text/css">
#welcometext {
position: absolute;
top: 11px;
left: 362px;
width: 245px;
height: 80px;
}

#navi { position: absolute; top: 140; left: 20;
}

#bildanzeige {
position: absolute;
top: 143px;
right: 20;
width: 360;
textalign: center;
left: 590px;
height: 288px;
}
body {
background-color: #CCCCCC;
}
.Stil1 { font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
}
.Stil2 {font-family: Georgia, "Times New Roman", Times, serif}
.Stil7 { font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
color: #000099;
font-size: 36px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:287px; top:56px; width:468px; height:46px; z-index:1">klicken Sie mit der Maus auf einen Kopf, um mehr Informationen zu erhalten </div>
<div align="center">
<p class="Stil7"><span class="Stil1">Volvo </span><span class="Stil2">for life</span></p>
</div>
<div id="navi"><h4><img src="Team/Gesamt.jpg" width="448" height="296" border="1" usemap="#Map">
<map name="Map">
<area shape="rect" coords="263,81,303,133" class=link href="#" title="Stefanie Greif"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild1)">
<area shape="rect" coords="201,78,237,122" href="#" title="Matthias Schrödl"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild2)">
<area shape="rect" coords="124,64,165,119" href="#" title="Matthias Melk"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild3)">
<area shape="rect" coords="57,86,98,137" href="#" title="Petra Gschwendtner"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild5)">
<area shape="rect" coords="178,46,208,78" href="#" title="Rene Freystedt"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild4)">
<area shape="rect" coords="259,39,299,77" href="#" title="Florian Gesinn"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild6)">
<area shape="rect" coords="329,26,366,68" href="#" title="Christian Salfner"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild7)">
<area shape="rect" coords="374,80,414,125" href="#" title="Christian Kusch"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild

">
<area shape="rect" coords="313,84,352,134" href="#"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild9)">
<area shape="rect" coords="194,195,242,272" href="#" title="Murphy"
onmouseout="Wechsel(Bild0)" onmouseover="Wechsel(Bild10)">
</map>
</h4>
<br>

</div>

<div id="bildanzeige">
<img name=dasBild src="http://www.werdenfelser-schandirutscher.de/volvo/logo1.gif" border=1><br>
<span id="textzumbild"> </span>
</div>
<hr>
<p> </p>
<p> </p>
</body></html>

aXCell · 03.06.2006, 01:10

Hallo.

Sorry, das ich solch ein "altes" Thema wieder aufgreife, aber das ist das einzige, welches meinem Problem am nächsten kommt.
Ich habe als Signatur in meinem Forum eine transparente GIF Datei, mit mehreren Hot Spots.
Nun soll beim Mouseover sich nur ein Teil der Signatur grafisch verändern.
Jedoch passiert nichts.
Ich habe je Mouseover Befehl auch eine eigene Grafik in den Abmessungen der Originalen, die dann eben darüber gelegt werden soll.
Warum wird die Grafik beim Mouseover nicht geändert?

Hier mal meine Signatur: (So, direkt aufgerufen funktioniert es komischerweise)
http://www.samsung-stuff.de/Signatur/signatur.htm

Jedoch in meiner Signatur im Board wird der Mouseover Effekt nicht dargestellt.
Auch die Alternativ Texte kommen nicht zum Vorschein.
Falls es euch hilft, hier auch mal der komplette Quelltext meiner Sigantur:

HTML-Code:

<html>
<head>
<title>Signatur aXCell</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('http://www.samsung-stuff.de/Signatur/signatur/signa2.gif','http://www.samsung-stuff.de/Signatur/signatur/signa3.gif','http://www.samsung-stuff.de/Signatur/signatur/signa4.gif','http://www.samsung-stuff.de/Signatur/signatur/signa5.gif','http://www.samsung-stuff.de/Signatur/signatur/signa6.gif')">
<table width="600" border="0" cellspacing="0">
  <tr>
    <td><img src="http://www.samsung-stuff.de/Signatur/signatur/signa1.gif" name="Image1" width="600" height="100" border="0" usemap="#Map" id="Image1"></td>
  </tr>
</table>
<map name="Map">
  <area shape="poly" coords="59,94" href="#">
  <area shape="poly" coords="272,20,265,2,28,78,36,95" href="http://www.samsung-stuff.de/board/votebox.php" target="_self" alt="Vote den User des Monats" onMouseOver="MM_swapImage('Image1','','http://www.samsung-stuff.de/Signatur/signatur/signa2.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="poly" coords="140,87,325,89,323,70,142,70" href="http://www.samsung-stuff.de/board/search.php?action=polls" target="_self" alt="Umfragen Pool" onMouseOver="MM_swapImage('Image1','','http://www.samsung-stuff.de/Signatur/signatur/signa3.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="poly" coords="277,49,278,29,428,70,425,87" href="http://www.samsung-stuff.de/board/board.php?boardid=206" target="_self" alt="Teil uns deine Meinung mit !" onMouseOver="MM_swapImage('Image1','','http://www.samsung-stuff.de/Signatur/signatur/signa4.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="poly" coords="383,28,386,46,539,27,533,8" href="http://www.samsung-stuff.de/board/map.php" target="_self" alt="Wohnorte der User" onMouseOver="MM_swapImage('Image1','','http://www.samsung-stuff.de/Signatur/signatur/signa5.gif',1)" onMouseOut="MM_swapImgRestore()">
  <area shape="poly" coords="463,70,463,49,586,71,584,92" href="http://www.samsung-stuff.de/board/board.php?boardid=186" target="_self" alt="Werde ein Teil von uns.." onMouseOver="MM_swapImage('Image1','','http://www.samsung-stuff.de/Signatur/signatur/signa6.gif',1)" onMouseOut="MM_swapImgRestore()">
</map>
</body>
</html>

Vielen Dank für eure kompetente Hilfe im vorraus,
aXCell | Admin Samsung-Stuff.de