Forum
Tipps
News
Menu-Icon

Grafik als Link

Hi
ich bin dabei eine hp zu schreiben. Dabei will ich (wie üblich) einen Frame links zum navigieren durch die hp machen. Die dort zu findenden Links sollen Grafiken sein.
soweit--sogut

Was ich nun aber nicht hinkriege ist, dass  das Bild sich ändert sobald ich mit der Maus über ihm bin oder es angeklickt habe.

Eine umständliche Lösung hab ich mir schon ausgedacht: für jeden 'Zustand' eine eigene html zu machen, auf diese jeweils über den link zuzugreifen und in sie einen automatischen Link einbauen, der die Seite im Hauptframe ändert.  :-\

Da mir das jedoch zu viel arbeit macht und unkonfortabel für den benutzer ist möchte ich das anders machen.
Manko ist, dass die hp auch offline laufen muss. Somit fällt php schonmal flach.

Vielen Dank schonmal für die Hilfe

MfG
Tobi  :)


Antworten zu Grafik als Link:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Also verstehe ich das jetzt richtig, du willst einfach für die Naviation eine Grafik haben, die sich ändert, wenn man mit der Maus drüberfährt?

Ich würde einfach mal sowas versuchen:
<script type="text/javascript">

function hovergrafik(grafik, id)
{
document.getElementById(id).src = grafik;
}

</script>

<a href="#" onmouseover="hovergrafik('drueber.jpg', 'link1')" onmouseout="hovergrafik('weg.jpg', 'link1')"><img src="weg.jpg" id="link1"></a>


Ist jetzt vielleicht nicht perfekt, habs nur mal schnell geschrieben, aber da müsstest du einfach zwei Grafiken haben, eine für den "normalen" Zustand und eine, wenn man mit der Maus drüberfährt.

Besteht da noch Erklärungsbedarf zu dem Script oder ist das verständlich? Ich habs nicht getestet, könnte auch ein kleiner(er) Fehler drinnen sein ;)


ich probiers gleich mal aus :)
kann kein java..also falls etwas nich geht sag ich bescheid :)

danke schonmal

------------

Ich kriegs nich hin :(
es funktioniert einfach nich..

« Letzte Änderung: 09.11.06, 18:26:12 von SLik »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Nur zur Info: Das ist Javascript, kein Java! Java ist eine eigenständige Programmiersprache und läuft ohne Zusatzprogramme (mal von der Java Platform abgesehen).

Javascript ist eine Scriptsprache und wird deshalb erst bei "Benutzung" übersetzt, also im Browser.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Wenn du auf JavaScript verzichten willst, kannste das auch mit CSS machen. Dazu einfach das gewünschte Bild als Hintergrund für den Link definieren, und dann noch in der hover-Pseudoklasse das Bild auswechseln. Noch schnell das Attribut "display:block;" gesetzt, und das war's. Ganz ohne JavaScript ;)

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Achja, CSS, da hatte ich auch dran gedacht, aber die Pseudoklasse :hover wird von einigen Browsern nicht immer angenommen, aber als Link sollte das ja kein Problem sein, nur der Netscape 4 macht da Probleme selbst bei Links, aber wer den noch "fährt" ist selber schuld ;)

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Man sollte sicherlich bei jeder Webentwicklung auf Browser-Kompatibilität achten. Aber irgendwann is dann auch mal Schluss mit lustig! ;D
Also wenn eine Seite IE 6, FF 1.0 und Konsorten unterstützt, sollte das ok sein.

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi,

also, wenns ich's recht verstanden habe suchst du sowas
wie eine Menü-Führung durch Bilder -
soll heißen, der Menüpunkt = zugleich Link\Anker und
= zugleich ein Bild, das sich im <mouserover>-Effekt verändert.

wie immer ganz uneigennützig - kuckst du

http://members.kabsi.at/erwin.billmaier/index.htm

(nimm waste brauchen kannst) ;)

Danke für den Link. :)

ich hab mir den Quelltext mal angeschaut aber blicke nicht wirklich durch..
ich denke ich werde das problem erstmal zurückstellen, bis ich mich in java etwas weiter eingearbeitet habe. Ich hab nu schon viel rumprobiert und nichts funktioniert so richtig bei mir.

Stattdessen will ich nun, dass einfach ein anderes bild kommt, sobald ich auf den grafik-link geklickt habe.
Ich hab mir 2-3 tutorials durchgelesen und probiert..allerdings funktioniert es noch nicht.
es wäre schön, wenn jemand mir den fehler nennen und korrigieren könnte. (Problemstellen sind markiert)
Danke im voraus

Tobi


Quelltext:

<html>
<head>
<title></title>
</head>
<body bgcolor=black>

 <script>
var pichome  = "bilder/b_home_x.gif",
    picreise = "bilder/b_reise.gif",
    picfotos = "bilder/b_fotos.gif",
    picimp   = "bilder/b_imp.gif";

function liste(id)
{
id=="lhome"  ?    {pichome="bilder/b_home_x.gif"} : {pichome="bilder/b_home.gif"};
id=="lreise" ?  {picreise="bilder/b_reise_x.gif"} : {picreise="bilder/b_reise.gif"};
id=="lfotos" ?  {picfotos="bilder/b_fotos_x.gif"} : {picfotos="bilder/b_fotos.gif"};
id=="limp"   ?      {picimp="bilder/b_imp_x.gif"} : {picimp="bilder/b_imp.gif"};
}

</script>

<p align="center"><a href=../main/home.htm target=main onClick=liste(lhome); >
<img src=&{pichome};  border=0 width=90% align=center alt=Home></a></p>

<p align="center"><a href=../main/reise.htm target=main onClick=liste(lreise);>
<img src=&{picreise};  border=0 width=90% align=center alt=Reise></a></p>

<p align="center"><a href=../main/fotos.htm target=main onClick=liste(lfotos);>
<img src=&{picfotos}; border=0 width=90% align=center alt=Fotos></a></p>

<p align="center"><a href=../main/imp.htm target=main onClick=liste(limp);>
<img src=&{picimp}; border=0 width=90% align=center alt=Impressum></a></p>

</body>

</html>

« Letzte Änderung: 11.11.06, 17:40:28 von SLik »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Warum kopierste dir nicht das funktionierende Beispiel von SelfHTML?

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

Kann sich mal wer den Quelltext anschauen bitte, den ich geschrieben hab? (2 weiter oben)
danke

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Zuerst wirst du mit deinem Skript keinen Mouseover erzielen, denn dafür musst du statt des EventHandlers "onClick" den Handler "onMouseover" verwenden.

Was dann kommt, ist erstmal falsch geschriebenes HTML: jeder Wert eines Attributes muss in Anführungszeichen stehen, sonst gibt das in den meisten Fällen Salat.

Was diese Notation betrifft: &{pichome};   ...bin zwar kein JavaScript-Experte, aber diese Syntax ist mir absolut fremd. Wo hast du das Skript denn her? Würde ich mir gern mal anschauen.

Ach ja, und der olle Schwoebel hat's ja schonmal geschrieben gehabt: Java hat absolut nichts mit JavaScript zu tun. Also nicht wundern, wenn du auf der Suche nach Tutorials etc. mit dem Stichwort "Java" nicht weit kommst ;)

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

kl.Nachtrag

- d.Wesentliche haben die Professoren @OS & @Jo gesagt
- was mir noch auffiel (nach mehrmaligem Studium d.Quellcodes v.@SLik)

• vom mouseover = keine Rede mehr
• 'on mouseover' und 'onClock' gleichzeitig wäre mir unbekannt


« BlackJackAlso ich hab ein Problem was langsam aber sicher anfängt, mich in den Wahnsinn z »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Mainframe
Große Computer, wie sie in Rechenzentren zum Einsatz kommen, und die über Terminals Tausende von Anwender bedienen. Siehe auch Super-Computer...

Bildpunkte
Bilder, die von einem Monitor wiedergegeben werden, bestehen aus einzelnen Bildpunkten (Pixeln). Je höher die Pixelanzahl ist, desto genauer und besser kann das Bild...

Bildschirmschoner
Der eigentliche Sinn des Bildschirmschoners ist, den Bildschirm vor dem Einbrennen des Monitorbildes zu schützen.Während das bei neueren Monitoren (außer ...