✔ rollover, der bild in anderer zelle verändert

T

tantebootsy

Erfahrenes Mitglied
Hi,
haben schon zwei andere Anleitungen zu dieser Frage gelesen, aber sind zu doof, das zu checken ;-)
Wir haben ein Bild in einer Tabelle, das einen Rollover erhalten soll. der Effekt soll sich aber auf das Bild in der Zelle daneben auswirken.
Wie stellen wir das an?
Könnte uns einer von Euch nen ausführlicheren Code liefern, wir drehen hier noch durch...
Danke schoma,
Gruß,
TB
 
Hi,
das ist ganz einfach... erstmal der Code
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
    <style type="text/css">
    </style>
	<script type="text/javascript">
	function switchPicture(neuesBild,obj){
	  document.images[obj].src = neuesBild;
	}
    </script>
  </head>
  <body>
  
  <table>
    <tr>
	  <td><img onmouseover="switchPicture('2.gif','image1_ro')" 
	           onmouseout="switchPicture('0.gif','image1_ro')" name="image1" src="1.gif"></td>
	  <td><img name="image1_ro" src="0.gif"></td>
	</tr>
	<tr>
	  <td><img onmouseover="switchPicture('4.gif','image2_ro')" 
	           onmouseout="switchPicture('0.gif','image2_ro')" name="image2" src="3.gif">  </td>
	  <td><img name="image2_ro" src="0.gif"></td>
	</tr>
  </table>
  
  </body>
</html>

Kurze Erklärung:
Wir haben eine Tabelle mit 2 Zeilen und 2 Spalten. In der ersten Spalte ist jeweils das Bild , das den Mouseover auslösen soll. In der zweiten Spalte wird das Mouseover erscheinen.
Die BIlder in der ersten Spalten bekommen also die Handler "onmouseover" und "onmouseout". In beiden Handlern rufen wir "switchPicture()" auf. Die Parameter sind zum einen das zu ladende Bild, zum anderen das zu ersetzende Bild - das über sein "Name" Attribut angesprochen wird... So... bei sonstigen Fragen einfach fragen...

Demo liegt im Anhang...


ciao
 

Anhänge

Hi,
danke für die ausführliche Hilfe, hat geklappt.
Wir haben nun bemerkt, dass wir in der selben Zelle auch noch einen Rollover brauchen. Also nun Rollover für BEIDE Zellen.
Erst dachten wir, wir versuchen es mit Deiner Funktion und geben einfach zusätzlich die erste Zelle an, was nicht hingehauen hat.
Dann haben wir den klassichen Rollover versucht einzubauen:

Normal1 = new Image();
Normal1.src = "01.jpg";
Highlight1 = new Image();
Highlight1.src = "01_ov.jpg"

function Bildwechsel(Bildnummer,Bildobjekt){
window.document.images[Bildnummer].src = Bildobjekt.src;
}

Und dann bei mouseover eben die Funktion Bildwechsel eingebaut...
Komischerweise hat das aber auch nicht funktioniert, weißt Du da ne Möglichkeit. Wird wohl net so schwer sein, aber wir wissen trotzdem nich wie..

Wir sind verzweifelt und dumm und würden Dich auch heiraten, wenn Du uns nochmal hilfst! :-) :-) :-)
Gruß,
TB
 
Hi,
eine provisorische Antwort/Beispiel kannst Du bei meinen Seiten sehen. Ich habe allerdings das Problem, dass meine Lösung nicht zuverlässig ist und manchmal nicht getauscht wird! Siehe anderes neueres Thema im Forum "Bildwechsel-Problem:..."

Vielleicht wird das Problem von jemandem gelöst.
Die Links zu den Seiten sind auch unter dem Thema

Gruß

Bwun
 
Kein Problem - das mit dem Heiraten überleg ich mir noch :p

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title></title>
	<script type="text/javascript">
	function switchPicture(bild,bildRO,neuesBild,obj){
	  bild.src=bildRO;
	  document.images[obj].src = neuesBild;
	}
    </script>
  </head>
  <body>
  
  <table>
    <tr>
	  <td><img onmouseover="switchPicture(this,'1ro.gif','2.gif','image1_ro')" 
	           onmouseout="switchPicture(this,'1.gif','0.gif','image1_ro')" name="image1" src="1.gif"></td>
	  <td><img name="image1_ro" src="0.gif"></td>
	</tr>
	<tr>
	  <td><img onmouseover="switchPicture(this,'3ro.gif','4.gif','image2_ro')" 
	           onmouseout="switchPicture(this,'3.gif','0.gif','image2_ro')" name="image2" src="3.gif">  </td>
	  <td><img name="image2_ro" src="0.gif"></td>
	</tr>
  </table>
  
  </body>
</html>
Ok, also ich hab der Funktion 2 zusätzliche Parameter spendiert. Der erste parameter muss immer 'this' sein um eine referenz auf das aktuelle Bild zu haben. Der Zweite Parameter ist das Rolloverbild für die erste Zelle. Der rest ist gleich geblieben...

Der Aufruf ist also switchPicture(this,'1ro.gif','4.gif','image2_ro') oder "übersetzt"
switchPicture(this,'Rollover für das erste Bild','Rollover für das zweite Bild','Name des zweiten Bildes'')

Beispiel is wieder im Anhang...


ciao
 

Anhänge

Okay, wann passt's Dir denn mit der Heirat, nächster Sonntag wär doch gut, oda? ;)
Apropos ... magst Du Kinder? :-)
Hat alles wunderbar geklappt, vielen Dank
Gruß,
TB
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück