Sensitive Grafiken in Tabellen?

R

ray2mi

Erfahrenes Mitglied
Hallo Leute :)

Also, mein Problem. Ich habe eine Tabelle mit 1 Spalte und 2 Zeilen. In der Oberen ist eine Grafik und in der unteren Zeile ist auch eine grafik.
Ich möchte das, wenn man auf die Obere Grafik geht, mit der Maus, sich die untere Verändert. Und geht man wieder von der oberen Grafik, soll die untere das anfangsbild wieder annehmen. So ähnlich wie bei einem Rollovereffekt nur das die Buttons blinken, wenn man über ein anderes Bild geht.
Hat da jemand eine Ahnung?
 
Hallo!

Der unten angefügte Code könnte funktionieren - habe ich noch nicht getestet. Dies ist eine von vielen Varianten - je nach deiner Problemstellung kannst du die Dynamik erweitern (ich weiß ja nicht, ob du die beiden Zeilen statisch oder dynamisch erstellst). Ich hoffe, ich konnte dir damit helfen :)!

MfG, Thomas D.

Code: 
<script type="text/javascript">
var rollIn = new Image ();
rollIn.src = "img3.jpg";
var rollOut = new Image ();
rollOut.src = "img2.jpg";

function over (element, out)
{
	var tr = document.getElementById ('changeTr');
	var td = tr.firstChild;

	for (var c=0; c<element.id; c++)
		td = td.nextSibling;

	if (!out)
		td.firstChild.src = rollIn.src; //Bild austauschen
	else
		td.firstChild.src = rollOut.src; //Bild austauschen
}
</script>
...
<table>
	<tr>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="out (this, true);" id="0" /></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="out (this, true);" id="1" /></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="out (this, true);" id="2"/></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="out (this, true);" id="3" /></td>
	</tr>
	<tr id="changeTr">
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
	</tr>
</table>
 
erstmal danke thomans das du dir die mühe gemacht hast :)
aber, 1. bin ich ein neuling in sachen html und habe eigentlich nicht sehr viel plan. ich habe also deinen text kopiert und einfach die image name gegen meine ausgetauscht...und, na ja es ging irgendwie nicht.
und worin liegt der unterschied zwischen dynamisch und statisch :rolleyes:
 
Nun eine funktionierende Version

Hallo!

Wie gesagt, ich habe das gestern nicht getestet, dadurch haben sich ein paar Denkfehler eingeschlichen. Hier eine funktionierende Version:

Code: 
<html>
<head>
<script type="text/javascript">
var rollIn = new Image ();
rollIn.src = "img3.jpg";
var rollOut = new Image ();
rollOut.src = "img2.jpg";

function over (element, out)
{
	var tr = document.getElementById ('changeTr');
	var td = tr.firstChild.nextSibling; //da erstes Kind = Leerzeile

	for (var c=0; c<element.id; c++)
		td = td.nextSibling.nextSibling; //da erstes Kind = Leerzeile

	if (!out)
		td.firstChild.src = rollIn.src; //Bild austauschen
	else
		td.firstChild.src = rollOut.src; //Bild austauschen
}
</script>
</head>
<body>
<table>
	<tr>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="over (this, true);" id="0" /></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="over (this, true);" id="1" /></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="over (this, true);" id="2"/></td>
		<td><img src ="img1.jpg" onMouseOver="over (this, false);" onMouseOut="over (this, true);" id="3" /></td>
	</tr>
	<tr id="changeTr">
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
		<td><img src ="img2.jpg" /></td>
	</tr>
</table>
</body>
</html>

Unter dynamischen Aufbau verstehe ich, dass ich mittels JavaScript die Datei zur Laufzeit aufbaue. Das obige Beispiel ist statisch, da die Anzahl der Bilder (2 * 4) bereits zu Beginn festgelegt wird und sich nicht mehr ändert. Hier könnte es aber auch sein, dass je nach User eine unterschiedliche Anzahl von Bildern angezeigt werden soll. Dies würde man durch das Node-System von JavaScript machen.

Beim Durchnavigieren durch den DOM-Baum muss man beachten, dass Leerzeilen zwischen zwei Tags als eigenes Element interpretiert werden. Somit ergiebt der Code

Code: 
<tr>
	<td></td>
	<td/></td>
</tr>

folgenden Aufbau:

tr->Leer
->td
->Leer
->td

Aus diesem Grund muss ich die nextSibling-Property, die den nächsten Geschwisterknoten in der Reihe ausgiebt auch zwei mal aufrufen. Sollten noch Fragen offen sein, einfach noch einmal melden :) ...

MfG, Thomas D.
 
Ich habe das nun alles auch nen bissle verwendet...so aaaber nun habe ich mal versucht, das immer mit unterschiedlichen Bildern zu machen.

Wir haben also eine Tabelle mit 2 Spalten und 2 Zeilen.

Bild1 Bild2
Bild_1 Bild_2

Also, die Anordnung in etwa so. DU hast mir ja gesagt wie ich es machen muss, wenn ich auf das Bild1 gehe das sich das Bild_1 mit einem Rollover vertrauscht und das Bild1 trotzdem als Link funktioniert.

Ich möchte das dann aber auch für weitere Bildreihen machen...d.h. direkt neben Bild1 ein neues und anderes Bild2. Wenn ich auf Bild2 mit der Maus gehen dann soll sich das Bild_2 unten wieder mit diesem Rollover effekt verändern. Also genau das gleiche nur für andere Bilder.

Ich möchte nämlich eine Buttonleiste bauen....oben sollen immer Fotos sein und, wenn man auf die Fotos geht dann soll unten der Name erscheinen (mit so einem Bildaustausch). Das Foto soll aber auch gleichzeitig der Link sein.
 
In diesem Fall hast du also nicht mehr nur rollIn und rollOut, sondern mehrere Bilder. D.h. du kannst den jeweilig zu tauschenden Namen beispielsweise in der Methode over() mitgeben. Alternativ kannst du aber auch eine andere Tauschvorschrift durchführen, indem du beispielsweise ein In- und ein Out-Array mit allen Bildern hast. Diese werden dann dem Index gerecht miteinander assoziiert. Du hast hier also viele Möglichkeiten und du solltest das mit dem bereits bekannten Code eigentlich spielend zusammen bekommen :) ...
 
ja danke...ich finde das immer sau nett, wenn die leute helfen und sich auch die zeit nehmen.

ich habe jetzt aber mal nen anderes prob, es hängt auch mit rollover effekt zusammen.
Ich kopiere dir den Text mal rein.

HTML: 
<html>
<head>
<title>Galerie</title>

<style type="text/css">
div.bgscroll {
  margin:0px 0px 0px 0px;
  width:718px;
  height:436px;
  border:0px solid red;
  background-image:url(main.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
  overflow:auto;
}
</style>

<script type="text/javascript">
		<!--

		Normal1=new Image();
		Normal1.src="fotb.jpg";
		Highlight1=new Image();
		Highlight1.src="fotb_on.jpg";
		
		Normal2=new Image();
		Normal2.src="videob.jpg";
		Highlight2=new Image();
		Highlight2.src="videob_on.jpg";
				
		function Bildwechsel(Bildnr,Bildobjekt) {
		window.document.images[Bildnr].src=Bildobjekt.src;
		}
		//-->
</script>

<table border="0" cellspacing="0" cellpadding="0">
        <tr>
        <td height="436" width="718">
        <div class="bgscroll">
          <table border="1" cellspacing="0" cellpadding="0" style="margin-top:75px" align="center">
            <tr>
              <td><a href="gal_foto.html"><img src="foto.jpg" height="250" width="250" border="0"></a></td>
              <td><a href="gal_film.html"><img src="film.jpg" height="250" width="250" border="0"></a></td>
            </tr>
            <tr>
              <td height="31" width="250">
                <a href="gal_foto.html"
       		onMouseOver="Bildwechsel(0,Highlight1)"
       		onMouseOut="Bildwechsel(0,Normal1)">
       		<img src="fotb.jpg" border="0"></a></td>
              <td height="31" width="250">
               <a href="gal_video.html"
       		onMouseOver="Bildwechsel(1,Highlight2)"
       		onMouseOut="Bildwechsel(1,Normal2)">
       		<img src="videob.jpg" border="0"></a></td>
            </tr>
          </table>
        </div>
        </td>
        </tr>
</table>
</html>

So mein Prob ist, wenn ich auf die Sensitive Grafik komme (die untere 250 breit 31 hoch) dann tauscht die sich mit dem Bild, in der Tabellenzeile drüber aus. Also es blinkt nicht in der Zelle sondern wechselt sich mit einer anderen Zelle...warum? Ich habe eigentlich nix falsch gemacht, ich habe sogar, nur zur sicherheit, den Text aus einem älteren Projekt kopiert und es ging trotzdem nicht. weißt du ne antwort?
 
ach ich habe es geschafft...ich musste nicht 1 und 2 als zahl schreiben sondern 3 und 4....damit der es rafft...aber trotzdem danke :D
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück