Hyperlink mit Bildern

jamaicagirl · 18. Juli 2004

Hi

Ich wollt nen Hyperlink machen, aber irgendwie das net so wie ich will ^.^ Also erst soll das Bild weiß sein und wenn man drüberfährt soll es das andere bild sein und dieses soll dann der link zu der neuen seite sein ..

Baba euer Jamaicagirl

SirToby · 18. Juli 2004

So habe ich das mal auf einer Website gelöst:

Im Head-Tag habe ich folgendes eingefügt:

PHP:

<script language="JavaScript" type="text/JavaScript">
bild1 = new Image();
bild1.src = "http://www.website.de/bild1.JPG";
bild2 = new Image();
bild2.src = "http://www.website.de/bild2.JPG";
function wechsel_1()
{
 window.document.images[0].src=bild2.src;
}
function wechsel_2()
{
 window.document.images[0].src=bild1.src;
}
</script>

Im Quelltext, also an der Stelle, wo dann das Bild erscheint und als Link funktionieren soll, sieht das Ganze so aus:

PHP:

<a href="../bild-seite.htm" target="Inhalt" onmouseover="wechsel_1()" onmouseout="wechsel_2()">
  <img src="http://www.website.de/bild1.jpg" width="240" height="135" border="5" />
</a>

So hab ich das gelöst und es funktionierte einwandfrei! - Hoffentlich klappts auch bei Dir!

jamaicagirl · 19. Juli 2004

THX für die schnelle Antwort ^.^ Muss die erstma ausprobieren ..

jamaicagirl · 19. Juli 2004

Ich find meinen Fehler nich ..

Könntet ihr ma gucken ..

PHP:

<html>
<html>
<head>
<script
language="JavaScript">
<!--
button1_a= new Image();
button1_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\pix1.bmp"
button1_b= new Image();
button1_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\pix2.bmp"
button2_a= new Image();
button2_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\schmallenberg1.bmp"
button2_b= new Image();
button2_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\schmallenberg2.bmp"
button3_a= new Image();
button3_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\dankern1.bmp"
button3_b= new Image();
button3_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\dankern2.bmp"
button4_a= new Image();
button4_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\home1.bmp"
button4_b= new Image();
button4_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\home2.bmp"
button5_a= new Image();
button5_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\book1.bmp"
button5_b= new Image();
button5_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\book2.bmp"
button6_a= new Image();
button6_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\links1.bmp"
button6_b= new Image();
button6_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\links2.bmp"
button7_a= new Image();
button7_a.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\disclaimer1.bmp"
button7_b= new Image();
button7_b.src= "C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\disclaimer2.bmp"
function wechsel_1() 
{ 
window.document.images[0].src=button1_b.src; 
} 
function wechsel_2() 
{ 
window.document.images[0].src=button1_a.src; 
}
function wechsel_3() 
{ 
window.document.images[0].src=button2_b.src; 
} 
function wechsel_4() 
{ 
window.document.images[0].src=button2_a.src; 
}
function wechsel_5() 
{ 
window.document.images[0].src=button3_b.src; 
} 
function wechsel_6() 
{ 
window.document.images[0].src=button3_a.src; 
}
function wechsel_7() 
{ 
window.document.images[0].src=button4_b.src; 
} 
function wechsel_8() 
{ 
window.document.images[0].src=button4_b.src; 
}
function wechsel_9() 
{ 
window.document.images[0].src=bbutton5_b.src; 
} 
function wechsel_10() 
{ 
window.document.images[0].src=button5_a.src; 
}
function wechsel_11() 
{ 
window.document.images[0].src=button6_b.src; 
} 
function wechsel_12() 
{ 
window.document.images[0].src=button6_a.src; 
}
function wechsel_13() 
{ 
window.document.images[0].src=button7_b.src; 
} 
function wechsel_14() 
{ 
window.document.images[0].src=button7_a.src; 
}

//-->
</script>
</head>

<body>

<a href="beispiel.html" onmouseover="wechsel_1()" onmouseout="wechsel_2()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\pix1.bmp" border="0" width="17" height="10"></a>

<a href="beispiel2.html" onmouseover="wechsel_3()" onmouseout="wechsel_4()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\schmallenberg1.bmp" border="0" width="64" height="10"></a>

<a href="beispiel3.html" onmouseover="wechsel_5()" onmouseout="wechsel_6()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\dankern1.bmp" border="0" width="74" height="10"></a>

<a href="beispiel4.html" onmouseover="wechsel_7()" onmouseout="wechsel_8()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\home1.bmp" border="0" width="23" height="10"></a>

<a href="beispiel5.html" onmouseover="wechsel_9())" onmouseout="wechsel_10()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\book1.bmp" border="0" width="46" height="10"></a>

<a href="beispiel6.html" onmouseover="wechsel_11)" onmouseout="wechsel_12()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\links1.bmp" border="0" width="26" height="10"></a>

<a href="beispiel7.html" onmouseover="wechsel_13()" onmouseout="wechsel_14()">
<img src="C:\Dokumente und Einstellungen\† Red Hot †\Eigene Dateien\Eigene Bilder\HP\Klasse\Bilder\index\navi\disclaimer1.bmp" border="0" width="49" height="10"></a>

</body>
</html>

Coranor · 19. Juli 2004

Also ich weiss nicht so recht, hab irgendwie das Gefühl, dass Du (sorry) keine Ahnung hast von dem ganzen.

Wieso benutzt Du .bmp Grafiken? Wieso absolute anstatt relative Pfade bei den Bildern (denke genau da liegt nämlich Dein Problem)?

Nur so als Beispiel, absolut:

Code:

<img src="C:Dokumente und Einstellungen† Red Hot †Eigene DateienEigene BilderHPKlasseBilderindex\navidisclaimer1.bmp>

relativ (angenommen die Bilder liegen im selben Ordner wie die html-Datei, was ich aber nicht empfehlen würde, wegen Übersichtlichkeit und Ordnung):

Code:

<img src="navidisclaimer1.bmp>

relativ, wenn die Bilder in einem anderen Ordner liegen, z.B. bilder:

Code:

<img src="bilder/navidisclaimer1.bmp>

Edit:
Okay, ich sehe gerade, in dem eigentlichen Beispiel benutzte er auch absolute Pfadangaben. So wie Du es gemacht hast bringt es Dir erstens später rein gar nichts, weil niemand auf Deinen Rechner zugreifen kann, deshalb hat er ja internet-adressen angegeben. Außerdem stimmt bei Deinen absoluten Pfaden so einiges nicht. Deshalb versuch's einfach mal mit absoluten.

jamaicagirl · 20. Juli 2004

Ich wusste, dass das den Eindruck interlässt ^.^
.bmp Datein da kamen mir nämlich komisch vor, denn Johann [Kumpel] meinte es würde auch gehen, denn meine .gif Formate sahen nen bissel anders .. halt wenn ich ma so sagen darf sch .. aus ..
Also ich probs jez nochma ..

Baba euer Jamicagirl

Coranor · 20. Juli 2004

Anstatt gif kannste auch jpg verwenden, das kommt immer auf das Bild drauf an, aber bmp fürs Internet?

Hab übrigens einen s*** da zusammengeschrieben, war halt schon irgendwie müde:

Außerdem stimmt bei Deinen absoluten Pfaden so einiges nicht. Deshalb versuch's einfach mal mit absoluten.

Muss natürlich relativen heißen :-(

jamaicagirl · 21. Juli 2004

Mannooo .. Es klappt nich .. Ich hab jez trotzdem nochma die absoluten genommen .. Später mach ich abba noch die relativen ...

mh.. Klappt irgendwie nit so ganz ^.^:
http://home.arcor.de/r10a/navi.htm

Baba euer Jamaicagirl

SilentWarrior · 21. Juli 2004

Vielleicht hilft dir ja das hier:

http://de.selfhtml.org/javascript/beispiele/buttons.htm

Sven Mintel · 21. Juli 2004

Zu den Pfaden und zu .bmp wurde ja schon genug gesagt....nur soviel noch, Bitmaps können, abgesehen davon, dass sie von der Dateigrösse recht ungünstig fürs Web sind, nicht von allen Browsern dargestellt werden.

Mir ist weiterhin Folgendes aufgefallen:

Du solltest die </a>-Tags mal überprüfen.... du musst diese innerhalb des <div>'s setzen, in welchem auch die jeweiligen öffnenden <a>-Tags zu finden sind.
Du musst die Funktionen beim richtigen Namen nennen... wenn du onmouseover="wechsel_05()" schreibst, muss auch eine Funktion mit genau diesem Namen vorhanden sein, ....und nicht wechsel_5()
Ich weiss nicht, ob dies beabsichtigt ist...aber alle deine Funktionen ändern das selbe Bild....
window.document.images[0] ist das erste Bild in der Seite...falls dies nicht beabsichtigt ist, musst du in den Funktionen die 0 durch die entsprechende Position des Bildes im Dokument ersetzen.
window.document.images[5]...wäre zum Beispiel das 6te Bild in der Seite.
Alternativ kannst du den Bildern auch ein name-Attribut verpassen, und sie darüber ansprechen.
Die Pfade stimmen momentan...soweit ich das überblicke

Hyperlink mit Bildern

jamaicagirl

Grünschnabel

SirToby

Erfahrenes Mitglied

jamaicagirl

Grünschnabel

jamaicagirl

Grünschnabel

Coranor

Erfahrenes Mitglied

jamaicagirl

Grünschnabel

Coranor

Erfahrenes Mitglied

jamaicagirl

Grünschnabel

SilentWarrior

Erfahrenes Mitglied

Sven Mintel

Mitglied

Neue Beiträge