Grafik als Link (SLik) - Computerhilfen.de

SLik
Gast

« am: 09.11.06, 17:29:11 »

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

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

23x "Danke"

Re: Grafik als Link

« Antwort #1 am: 09.11.06, 17:38:58 »

Hat dir diese Antwort geholfen?

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:

Code: [Auswählen]

<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

Moderator informieren

SLik
Gast

Re: Grafik als Link

« Antwort #2 am: 09.11.06, 17:45:18 »

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 »

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

23x "Danke"

Re: Grafik als Link

« Antwort #3 am: 09.11.06, 17:53:54 »

Hat dir diese Antwort geholfen?

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.

Moderator informieren

JoSsiF (9.085)

66x Beste Antwort

123x "Danke"

Re: Grafik als Link

« Antwort #4 am: 09.11.06, 19:04:40 »

Hat dir diese Antwort geholfen?

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
JoSsiF

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

23x "Danke"

Re: Grafik als Link

« Antwort #5 am: 09.11.06, 20:17:05 »

Hat dir diese Antwort geholfen?

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

Moderator informieren

JoSsiF (9.085)

66x Beste Antwort

123x "Danke"

Re: Grafik als Link

« Antwort #6 am: 09.11.06, 20:39:39 »

Hat dir diese Antwort geholfen?

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

greez
JoSsiF

Moderator informieren

eBill (†) (8.625)

118x Beste Antwort

165x "Danke"

Re: Grafik als Link

« Antwort #7 am: 10.11.06, 14:37:32 »

Hat dir diese Antwort geholfen?

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)

Moderator informieren

SLik
Gast

Re: Grafik als Link

« Antwort #8 am: 11.11.06, 16:13:54 »

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 »

Moderator informieren

JoSsiF (9.085)

66x Beste Antwort

123x "Danke"

Re: Grafik als Link

« Antwort #9 am: 11.11.06, 16:58:35 »

Hat dir diese Antwort geholfen?

Warum kopierste dir nicht das funktionierende Beispiel von SelfHTML?

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

Moderator informieren

SLik
Gast

Re: Grafik als Link

« Antwort #10 am: 11.11.06, 18:23:27 »

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

Moderator informieren

JoSsiF (9.085)

66x Beste Antwort

123x "Danke"

Re: Grafik als Link

« Antwort #11 am: 12.11.06, 01:40:32 »

Hat dir diese Antwort geholfen?

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
JoSsiF

Moderator informieren

eBill (†) (8.625)

118x Beste Antwort

165x "Danke"

Re: Grafik als Link

« Antwort #12 am: 13.11.06, 12:40:56 »

Hat dir diese Antwort geholfen?

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

Moderator informieren

Grafik als Link

Antworten zu Grafik als Link:

Re: Grafik als Link

Mehr zu Grafik als Link

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