Ein "besonderer" Hover Effekt

D

ddr-ram

Grünschnabel
Hallo zusammen,

gerne möchte ich Euch Experten einmal um Hilfe fragen. Da ich mich mit Javascript gar nicht auskenne, stehe ich natürlich vor einem (für mich) großen Problem.

Es geht um folgende Realisierung, hier einmal eine Skizze:

http://www.pyrofreaxx.net/test.gif

Ich habe eine Tabelle mit den Zellen die Ihr in der Grafik seht. Das "Startbild ist ein großes Bild. Die Bilder 1,2 und 3 sind jeweils kleine Grafiken.

Nun möchte ich, wenn ich beispielsweise mit der Maus auf die kleine Grafik Nr.1 fahre, dass sich dieses Bild austauscht mit einem anderen in der selben Größe (einfacher Hovereffekt),
ABER: Zur selben Zeit soll auch das "Startbild" mit einem anderen großen Bild (Bild passend zum Thema des 1. kleinen Bildes) ausgetauscht werden.

Quasi zwei Hover-Effekte in einem. Das ganze soll natürlich auch für die kleinen Bilder 2 und 3 gelten.

Kann mir wohl jemand von Euch zeigen oder erklären, wie ich das anstellen kann?

Ich würde mich über eine Hilfe sehr freuen.

Besten Dank im Vorraus und viele Grüße

ddr-ram
 
Also prinzipiell sprichst du die Bilder über document.getElementById('id') an. Um das, was sie zeigen zu ändern musst du ihr src-Attribut ändern und das ganze bei onmouseover. Ich glaube aus folgendem Beispiel wird das Prinzip ersichtlich:
HTML: 
<img id="bild1" src=" bild1.jpg">
 <img id="bild2" src="bild2.jpg" onmouseover="this.src='bild2b.jpg;document.getElementById('bild1').src='bild1b.jpg''">
 
Hi, erstmal danke für die schnelle Antwort.

con-f-use hat gesagt.:
Also prinzipiell sprichst du die Bilder über document.getElementById('id') an. Um das, was sie zeigen zu ändern musst du ihr src-Attribut ändern und das ganze bei onmouseover. Ich glaube aus folgendem Beispiel wird das Prinzip ersichtlich:
HTML: 
<img id="bild1" src=" bild1.jpg">
<img id="bild2" src="bild2.jpg" onmouseover="this.src='bild2b.jpg;document.getElementById('bild1').src='bild1b.jpg''">
Zum Vergrößern anklicken....

Ich habe es mal so probiert (bzw. versucht zu probieren, als Laie):

Code: 
 <body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
	<td width="600"><a href="#"><img src="startgross.gif" width="600" height="300" border="0" id="bild1"></a></td>
	<td><table width="200" border="0" cellspacing="0" cellpadding="0">
		<tr>
		 <td><a href="#"><img src="kleinbild1.gif" width="200" height="100" border="0" id="bild2" onmouseover="this.src='kleinbild1b.gif;document.getElementById('bild1').src='startgross2.gif''"></a></td>
		</tr>
		<tr>
		 <td><a href="#"><img src="kleinbild2.gif" width="200" height="100" border="0" id="bild3" onmouseover="this.src='kleinbild2b.gif;document.getElementById('bild1').src='startgross3.gif'';"></a></td>
		</tr>
		<tr>
		 <td><a href="#"><img src="kleinbild3.gif" width="200" height="100" border="0" id="bild4" onmouseover="this.src='kleinbild3b.gif;document.getElementById('bild1').src='startgross4.gif'';"></a></td>
		</tr>
	 </table></td>
</tr>
</table>
</body>

Nur leider funktioniert das nicht. Was habe ich falsche gemacht, oder wie kann man es ändern, dass es funktioniert?

Grüße

ddr-ram
 
Mein Vorschlag: Notiere die einzelnen Bilder innerhalb einer Liste
Code: 
<ul class="gallery">
	<li><a href="<Grafik-URL Originalgröße>"><img src="<Grafik-URL Vorschau>" alt="Abbildung 1" /></a></li>
	<li><a href="<Grafik-URL Originalgröße>"><img src="<Grafik-URL Vorschau>" alt="Abbildung 2" /></a></li>
	<li><a href="<Grafik-URL Originalgröße>"><img src="<Grafik-URL Vorschau>" alt="Abbildung 3" /></a></li>
</ul>
Anschließend wird daraus durch folgende Funktion die dynamische Galerie:
Code: 
function init_gallery() {

	if( !document.getElementsByTagName ) {
		return false;
	}

	var lists = document.getElementsByTagName('ul');
	for(var i=0; i<lists.length; i++) {
		if( lists[i].className != 'gallery' ) {
			continue;
		}

		var listItems = lists[i].getElementsByTagName('li');
		for(j=0; j<listItems.length; j++) {
			var lnk = listItems[j].firstChild;
					lnk.onclick = new Function("document.getElementById('gallery_img').src='"+lnk.getAttribute('href')+"'; return false;");
		}
		var randKey = (Math.round(Math.random()*100) % listItems.length);
		var newIMG = document.createElement('img');
		    newIMG.setAttribute('id', 'gallery_img');
		    newIMG.setAttribute('src', listItems[randKey].firstChild.getAttribute('href'));
		    newIMG.setAttribute('title', listItems[randKey].firstChild.firstChild.getAttribute('title'));
		    newIMG.setAttribute('galleryimg', 'no');
		var newDT = document.createElement('div');
		    newDT.appendChild(newIMG);
		lists[i].parentNode.insertBefore(newDT, lists[i]);
	}
}
Danach kannst du die Galerie mit CSS entsprechend formatieren.
 
Ah, sorry, hatte in meinem letzten Beitrag die Anführungszeichen falsch gesetzt. Es muss natürlich heißen:
HTML: 
<img id="bild2" src="bild2.jpg" onmouseover="this.src='bild2b.jpg';document.getElementById('bild1').src='bild1b.jpg'">
 
Hi, danke dir schön.

con-f-use hat gesagt.:
Ah, sorry, hatte in meinem letzten Beitrag die Anführungszeichen falsch gesetzt. Es muss natürlich heißen:
HTML: 
<img id="bild2" src="bild2.jpg" onmouseover="this.src='bild2b.jpg';document.getElementById('bild1').src='bild1b.jpg'">
Zum Vergrößern anklicken....

Habe das ganze noch um:

Code: 
 onMouseOut="this.src='kleinbild1.gif';document.getElementById('bild1').src='startgross.gif'"

erweitert, dann habe ich, wenn die Maus die Fläche verlässt, wieder den Ausgangszustand.

Danke Euch allen (auch Gumbo) für die tolle Hilfe. :)

@Gumbo

Sorry das ich deinen Vorschlag nicht realisiert habe, aber als Anfänger ist mir das ein bisschen zu schwer. Ich danke aber trotzdem für deine tolle Mühe.

Gruss

ddr-ram
 
Sorry das ich deinen Vorschlag nicht realisiert habe, aber als Anfänger ist mir das ein bisschen zu schwer. Ich danke aber trotzdem für deine tolle Mühe.
Zum Vergrößern anklicken....
Dort gibt es nichts zu realisieren. So wie es dort steht, ist es komplett. Du musst lediglich die einzelnen Bilder in eine Liste auszeichnen, den Rest übernimmt die JavaScript-Funktion. Was ist daran schwer?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück