Gernot Back: Menue> Bildaustausch

Beitrag lesen

SELF-Forum

Menue> Bildaustausch

Gernot Back Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo nadine,

ich habe dir mal was gebastelt. Die Kommentare im Quellcode (alles was hinter doppelten Schrägstrichen steht) kannst du natürlich löschen. Bitte tu mir aber den Gefallen und versuche sie vorher zu verstehen, auch, indem du die verwendeten Techniken mal selbst hier in SELFHTML nachschaust, damit du dich mal von Dreamweaver unabhängig machen kannst.

Als Beispiel-Buttons habe ich die in diesem SELF-Beispiel benutzt. Dabei handelt es sich um GIFs, für die es jeweils eine normale Version ohne "h" vor dem ".gif" gibt und eine gehighlightete mit "h" vor dem ".gif". Natürlich kannst du für deine Butons auch andere Bildformate und eine andere Kennung für die gehighlightete Version nehmen, dann musst du das Skript aber entsprechend anpassen. Ich glaube, das schaffst du dann.

  
<html>  
<head>  
<title>Merkbutton</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<script type="text/javascript">  
[code lang=javascript]  
var merk;  // global deklarierte Variable  
  
function rein (button) {  
  var pfad = button.getElementsByTagName('IMG')[0].src;  // Quelle der ersten Grafik im Link  
  if(pfad.indexOf('h.gif')<0) { // wenn es sich nicht bereits um die gehighlightete Version handelt  
    pfad = pfad.substring(0,pfad.indexOf('.')) + 'h.gif';  // wird der Button gehighlightet  
    button.getElementsByTagName('IMG')[0].src = pfad;  
  }  
}  
  
function raus (button) {  
  if(button!=merk) {  // wenn es sich nicht um den zuletzt angeklickten Button handelt  
    var pfad = button.getElementsByTagName('IMG')[0].src;  
    pfad = pfad.substring(0,pfad.indexOf('h.')) + '.gif';  // zurück zur Normalversion  
    button.getElementsByTagName('IMG')[0].src = pfad;  
  }  
}  
  
function klick (button) {  
  merkAlt=merk;  // Zwischenspeichern des zuletzt gemerkten Buttons, möglicherweise "undefined"  
  merk=button;  // Aktuell geklickten Button merken  
  if(merkAlt)  // wenn zuvor schon einmal ein Button gemerkt wurde, also nicht "undefined"  
    raus(merkAlt);  // Highlighting des nicht mehr akuellen Buttons entfernen  
}

</script>
</head>
<body>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
  <img src="button1.gif" width="130" height="30" border="0" alt="Home"></a><br>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
  <img src="button2.gif" width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
  <img src="button3.gif" width="130" height="30" border="0" alt="Layouts"></a><br>
</body>
</html>
[/code]

Allerdings funktioniert das Skript nur mit Browsern, die die verwendeten DOM-Methoden verstehen, das dürften aber inzwischen die meisten sein, und da kann man auf solche Klimmzüge, wie sie Dreamweaver macht, um auch die wenigen alten Browser noch zu bedienen gut verzichten, meine ich.

Gruß Gernot

Beitrag melden
–
Informationen zu den Bewertungsregeln