Sorry: noch mal Rollover @ tutorials.de: Tutorials, Forum & Hilfe

Grille · 06.03.04 12:26

ich habe:
diese Webseite gemacht, und habe in der Mitte ein großes Bild, welches mehrere Knöpfe darstellt.

Da ich diese Knöpfe nicht als Grafiken teilen kann, habe ich über jede Knopfgrafik
eine MAP gelegt. nun möchte ich ein rollover mit dem selben Bild:

also wenn ich auf map1 gehe, soll sich die grosse "Knopfgrafik" mit der aktiven
Grafik Nummer1 auswechseln; wenn ich auf map2 gehe, soll sich die
grosse "Knopfgrafik" mit der aktiven Grafik Nummer2 auswechseln ... uns so
weiter.

Wie kann man das machen?

das ist der HTML-CODE:

PHP-Code:


<HTML>

<HEAD>

<TITLE>Elerion</TITLE>

<script language="JavaScript">

<!--

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_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_findObj(n, d) { //v4.0

  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 && document.getElementById) x=document.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 BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('bilder/knopf1.jpg')">

<TABLE WIDTH=950 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">

  <TR>

    <TD COLSPAN=3><IMG SRC="bilder/sandstein_01.jpg" WIDTH=950 HEIGHT=176 ALT=""></TD>

    </TR>

    <TR>

    <TD><IMG SRC="bilder/sandstein_02.jpg" WIDTH=261 HEIGHT=424 ALT=""></TD>

     <TD><img name="b0b1" border="0" src="bilder/knopf0.jpg" width="428" height="424" usemap="#b0b1Map"><map name="b0b1Map"><area shape="poly" coords="328,93,305,71,279,56,257,47,247,46,237,51,233,76,230,96,226,106,233,129,238,151,241,168,246,184,252,200,259,214,266,228,277,226,294,212,306,201,318,194,328,183,333,168,335,154,344,149,353,143,342,118" href="toplink.htm" target="main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b0b1','','bilder/knopf1.jpg',1)" usemap="#b0b2" border="0"></map></TD>

    <TD><IMG SRC="bilder/sandstein_04.jpg" WIDTH=261 HEIGHT=424 ALT=""></TD>

    </TR>

</TABLE>



</BODY>

</HTML>

Sven Mintel · 06.03.04 16:47

Mach so weiter, wie du angefangen hast.... definiere die einzelnen <area>'s, und weise ihnen die beiden onmouseover/onmouseout-Aufrufe zu.
Beim Onmouseover musst du dann den Namen des entsprechenden Bildes ändern... das sollte reichen.

Aber mal was anderes.... für mich als Modemuser ist es eine Zumutung, ...ich warte in der Regel nicht 1min+, bis eine Seite geladen ist.... ein halbes MB an Grafik ist für eine Seite entschieden zuviel

ES sieht zwar wirklich toll aus,..aber wenn du zahlreiche Besucher haben willst, soltest du unbedingt einen Weg finden, das zu dezimieren.... bei diesem halben MB sind 0Byte Information dabei... ich wage garnicht daran zu denken, was da noch kommt, wenn du die Inhalte fertig hast.

Grille · 06.03.04 17:15

Danke für die Antwort. Auch wenn ich nicht weiß, wie man das macht was du mir
als Wegbeschreibung gegeben hast: habe leider noch keine Ahnung von
Javaskript! Ist es so ähnlich wie AS von Flash?

naja ... zum Grafik-Berg!
Ich kann dich gut verstehen! Aber weil das eine Seite für Online-Spieler ist gehe
ich auch davon aus, dass die zumindest ISDN haben. Also: da habe ich schon an
meine Zielgruppe gedacht.

Sven Mintel · 06.03.04 17:23

na so meinte ich das(die Koordinaten fürs area hab ich mir mal geschenkt

)

Code :

<map name="b0b1Map">
<area shape="poly" coords=" ?" href="?" target="main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b0b1','','bilder/knopf1.jpg',1)" >
<area shape="poly" coords=" ?" href="?" target="main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b0b1','','bilder/knopf2jpg',1)" >
<area shape="poly" coords=" ?" href="?" target="main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b0b1','','bilder/knopf3jpg',1)" >
<area shape="poly" coords=" ?" href="?" target="main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('b0b1','','bilder/knopf4jpg',1)" >
</map>

..usw

Grille · 06.03.04 17:32

hmm .. achso .. du meinst das script selbst stimmt schon!
Achso!
Ich probier mal ... Danke!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

PS-CS3=Rollover + Remote Rollover

Noch ein Rollover Problem

Rollover mit CSS IE und NS

Grafiktabletts - noch großer, noch besser, noch schneller ?

Rollover

E-Mail:

Abonnieren Abbestellen