• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

bilderwechsel bei linkberührung

Status
Für weitere Antworten geschlossen.
C

ChillerT

Mitglied
Hallo,

Ich habe mir folgendes vorgestellt und möchte es auch so haben! ich weiß das es geht, jedoch nicht wie!

Es ist in eine Rechte navi-box eingebaut..

in der stehen 5 Namen von freunden und daneben ein kleines kästchen...
jetzt soll jeweil über welchen namen ich fahre im Kästchen ein bild von der jeweiligen Person erscheinen!

Zudem möchte ich die Namen dann noch verlinken aber das ist ja kinderkacke....

Vorstellung:

Dieter ....... _________
Manuel ......|............ |
Kai ...........|............. |
Marko .......|............. |
Lisa ..........|_________| (bitte punkte wegdenken!)


so ungefähr... wenn noch fragen bestehen bitte melden...währe aber echt toll wenn das klappen würde....vielen dank!
 
Möglichkeit 1: wenn der Link auch um das Bild herum geht: definiere es als Hintergrundbild des Links und nutze den hover-Effekt des Links um das Bild zu wechseln. Vorteil: geht ohne JavaScript.

Möglichkeit 2: JavaScript. Z.B. so:

Code: 
document.getElementById('bildid').src='neuesbild.gif'
in Verbindung mit dem Eventhandler "onmouseover" (für den Moment der Berührung) bzw. "onmouseout" (für den Moment des Verlassens der Fläche mit dem Mauszeiger).
 
danke

Dnake....hab aber nicht so viel mit javascript zu tun gehabt als das ich Punkt 2 vollkommen verstanden habe....

könntest du mir vielleicht ein beispielscript erstellen???

also link für die bilder sind:
img/Lara1.jpg
img/Markus/2.jpg
img/Tobias3.jpg

und dann jeweils die namen:
Lara
Markus
Tobias....

Wäre echt toll, dann würde ich nähmlich den sinn sofort verstehen und alklein weitermachen können!

Vielendank für deinen post!
 
Nur ein Beispiel:

Code: 
<a href="ziel.html" onmouseover="document.getElementById('bildlara').src='img/Lara1.jpg';" onmouseoout="document.getElementById('bildlara').src='img/Lara2.jpg';">Lara</a>
<img src="img/Lara2.jpg" id="bildlara" alt="" />
Wie du Bild und Link dann anordnen willst weiß ich ja nicht.
 
Sooo

sooo, habs jetzt in etwa geschaft...mein Endcode für die box sieht wie folgend aus:


PHP: 
 <body style="background-color: #1e1e1e">
<table bgcolor="#000000" border="2" bordercolor="#fd6a00">
    <tr><td width="186"><font face="arial" size="2" color="#cfcfcf"><b>Bitte einen Stream wählen:</b></font></td></tr>
<tr>
<table bgcolor="#1e1e1e" border="2" bordercolor="#ff9e01">
     <tr>
         <td width="130">
             <table ><font size="2">
<style type="text/css">
a:link { text-decoration:none; color:#ff6600;}
a:visited { text-decoration:none; color:#ff6600;}
a:hover {border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: #ffcc00; text-decoration:underline; color: #ffcc00; margin: 3px}
a:active { text-decoration:underline; color:#00ff00;}
a:focus { text-decoration:blink; color:#00ff00;}
</style><b>
        <a href="http://1.html" onmouseover="document.getElementById('bild').src='img/Lara.jpg';" onmouseoout="document.getElementById('bild').src='img/Lara.jpg';">Lara</a><br />
        <a href="http://2.html" onmouseover="document.getElementById('bild').src='img/Marvin.jpg';" onmouseoout="document.getElementById('bild').src='img/Marvin.jpg';">Marvin</a><br />
        <a href="http://3.html" onmouseover="document.getElementById('bild').src='img/Lukas.jpg';" onmouseoout="document.getElementById('bild').src='img/Lukas.jpg';">Lukas</a><br />
        <a href="http://4.html" onmouseover="document.getElementById('bild').src='img/Lari.jpg';" onmouseoout="document.getElementById('bild').src='img/Lari.jpg';">Lari</a><br />
        <a href="http://5.html" onmouseover="document.getElementById('bild').src='img/Stephan.jpg';" onmouseoout="document.getElementById('bild').src='img/Stephan.jpg';">Stephan</a></tr>
</b>    </table>
</td>
    <td width="50"><img src="img/ANFANGSBILD.jpg" id="bild" alt="" />
    </td>
    <table>
    </tr>
</table>
wobei der eigendliche teil eigendlich aus diesem code besteht:
PHP: 
<table bgcolor="#000000" border="2" bordercolor="#fd6a00">
    <tr><td width="186"><font face="arial" size="2" color="#cfcfcf"><b>Bitte einen Namen wählen:</b></font></td></tr>
<tr>
<table bgcolor="#1e1e1e" border="2" bordercolor="#ff9e01">
     <tr>
         <td width="130">
             <table ><font size="2">
<b>
        <a href="http://1.html" onmouseover="document.getElementById('bild').src='img/Lara.jpg';" onmouseoout="document.getElementById('bild').src='img/Lara.jpg';">Lara</a><br />
        <a href="http://2.html" onmouseover="document.getElementById('bild').src='img/Marvin.jpg';" onmouseoout="document.getElementById('bild').src='img/Marvin.jpg';">Marvin</a><br />
        <a href="http://3.html" onmouseover="document.getElementById('bild').src='img/Lukas.jpg';" onmouseoout="document.getElementById('bild').src='img/Lukas.jpg';">Lukas</a><br />
        <a href="http://4.html" onmouseover="document.getElementById('bild').src='img/Lari.jpg';" onmouseoout="document.getElementById('bild').src='img/Lari.jpg';">Lari</a><br />
        <a href="http://5.html" onmouseover="document.getElementById('bild').src='img/Stephan.jpg';" onmouseoout="document.getElementById('bild').src='img/Stephan.jpg';">Stephan</a></tr>
</b>    </table>
</td>
    <td width="50"><img src="img/ANFANGSBILD.jpg" id="bild" alt="" />
    </td>
    <table>
    </tr>
</table>
Ich habe jetzt nur noch ein Problem....wenn man mit dem maus, einen der links verlässt, also auch wenn man die box verlässt, soll das anfangsbild wieder hergestellt werden, im Moment wird dann dfas letzte bild angezeigt, das man über den link berührt hat....wie mache ich das jetzt??? Könntest du mir noch einmal helfen?

Vielen dank für deine Hilfe bis jetzt...ist echt geil :-)
 
Der Quellcode ist so aber immernoch fehlerhaft:

- schmeiß alle <font>-Tags raus, die sind überholt
- <style> gehört in den <head>-Bereich
- ein offener <table>-Tag aber ohne Tabelleninhalte
- wozu beginnst du innerhalb dieser falschen Tabelle ein <b> und beendest es nach dem </table>-Tag? auch falsch.
 
???

also, danke erstmal fürs antworten, desweitweren verstehe ich 1. nicht, warum ich die fonts rausschmeißen soll, da ich so die schrift auf meine gewünschte größe angepasst habe
2. <style> kann ich nicht in den head bereich setzten, da dieser tablecode in eine schon fertigwe Homepage eingesetzt wird!
3. alle table's gewünscht und meinen Versuchen nach sein müssen
4. mit <b> wollte ich nur die schrift dick machen und warum habe ich den table-tag falsch beendet???

5. Beantwortet es mir leider auch nicht meine vorige frage....könntest du mir vielleicht dabei auch noch weiterhelfen.....VIELEN DANK für deine hilfe.....bin ich dir echt dankbar drum!
 
ChillerT schrieb:
desweitweren verstehe ich 1. nicht, warum ich die fonts rausschmeißen soll, da ich so die schrift auf meine gewünschte größe angepasst habe
Zum Vergrößern anklicken....

Dafür nutzt man keine Font-Tags mehr, informiere dich mal über "span" -> Damit kannst du das gleiche Ziel in einem modern umgesetzten Code erreichen.

ChillerT schrieb:
2. <style> kann ich nicht in den head bereich setzten, da dieser tablecode in eine schon fertigwe Homepage eingesetzt wird!
Zum Vergrößern anklicken....

Style-Tags und deren Inhalt gehören immer zu 100% in den Head-Bereich der Seite (-> Grundgerüst, siehe dort!)

ChillerT schrieb:
4. mit <b> wollte ich nur die schrift dick machen
Zum Vergrößern anklicken....

Darfst du ja auch (wobei <strong> vielleicht besser wäre ?!?), die Tags müssen allerdings in der richtigen reihenfolge beendet werden!

Falsch:

Code: 
<em><strong>Text</em></strong>

Richtig:

Code: 
<em><strong>Text</strong></em>
 
Hmmm

Gut, ich habe HTML so gelernt!
Aber dann muss ich mich halt umgewöhnen, desweiteren dachte ich das die Code rheinfolge egal wäre....so habs ich aufjedenfall gelernt!

Ich bitte trotzdem nocheinmal darum, mir meine eigendliche frage zu beantworten, da ich dies nicht einfach nachlernen kann....

Danke für eure erklärungen an einen Newbie und bitte um neue Antworten!
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben