XProfan

Deutsch

Christian
Hahn

Hallo Leute,
ich sitze gerade an meiner HP und habe folgendes Problem:
Über JavaScript wollte ich ein onmouseover Event erstellen, welches auf derzeit zwei Bildern liegt (pic1_1.jpg & pic2_1.jpg). Geht man nun über diese Bilder drüber sollte ein anderes Bild an dieser Stelle angezeigt werden (pic1_2.jpg bzw. pic2_2.jpg).
Ich schreibe das ganze in XHTML, dort funktioniert es nicht, in HTML aber schon.

Weiss einer wie ich das hinbekomme?

Hier mal der Code der JaveScript Funktion:

Kompilieren Markieren Separieren

<script type=text/javascript>
function doHover(b,i)

{

    f = document[b].src;
    f = f.substr(0,f.length-5);
    f+=i+.jpg;
    document[b].src = f;

}

</script>

Und hier der Aufruf

Kompilieren Markieren Separieren

<img name=bild1 alt=bild1 src=pic1_1.jpg onmouseover=doHover(bild1,2) onmouseout=doHover(bild1,1) />
<img name=bild2 alt=bild2 src=pic2_1.jpg onmouseover=doHover(bild2,2) onmouseout=doHover(bild2,1) />

Danke schonmal im vorraus

Hallo Tim,
warum so kompliziert, hier ein einfacher Bildwechsler mit JS

Kompilieren Markieren Separieren

<img src=erstesbild.jpg onmouseover=this.src=zweitesbild.jpg; onmouseout=this.src=erstesbild.jpg; alt=Bildwechsler />

Und hier noch ein Link wie es ohne JS funktioniert
https://1ngo.de/web/bildwechsel.html

mfG Christian

Windows XP und Profan10 | Homepage... | Folge mir...

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

- Seite 1 -

Tim
Hannemann

Danke Christian

hat super geklapt

aber ich werd wohl die JS variante nutzen da sie mir einfacher erscheint

MfG Timää

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

Betriebssysteme: Windows Vista

Profanversion: XProfan 11

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Christian
Hahn

Freut mich

Nur als Denkanstoß, die Variante ohne JS, nur mit CSS, funzt auch in Browsern in dem der Anwender JS deaktiviert hat! Die CSS Variante ist auch nicht komplizierter, sieht nur so aus.

mfG Christian

Windows XP und Profan10 | Homepage... | Folge mir...

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Wenn sich nur das BGImage ändern soll, dann wäre vlt. eine CSS-Variante vorzuziehen:

Kompilieren Markieren Separieren

someThing{

    ;background-image:url(images/somePicture)

}

someThing:hover{

    ;background-image:url(images/someOthPicture)

}

Zu beachten ist vlt. dass hover nicht von allen Browsern (IE) für _alle Elemente beachtet wird, aber immer für a(nchor)s welche ja im Bedarfsfall auch ohne hRef angewandt werden können.

Kompilieren Markieren Separieren

a.someClass{

    ;display:block
    ;width:xxPx
    ;height:yyPx
    ;background-image:url(images/somePicture)

}

a.someClass:hover{

    ;background-image:url(images/someOthPicture)

}

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Tim
Hannemann

nene also wenns nur das Backgroundimage wäre hät ichs auch über CSS gelöst/versucht

aber is halt ein Bild auf der HP, oder besser mehrere Bilder, die sich beim drüber gehen in andere Bilder ändern ^^

@Christian:
Ja ich weiss das JS aktiv sein muss, aber das is eigentlich in der Regel der Fall ^^

MfG Timää

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

Betriebssysteme: Windows Vista

Profanversion: XProfan 11

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Wenn Du das BGImage änderst, wo ist der Unterschied?

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Tim
Hannemann

der unterschied ist der das ich sagen wir 3 bilder hab, jedes dieser bilder hat ein dazugehöriges bild
und ich wollt nicht dutzende css klassen schreiben ^^

MfG Timää

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

Betriebssysteme: Windows Vista

Profanversion: XProfan 11

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Japp, dass macht Sinn.

19.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Tim
Hannemann

IF hats zwar schon als Erledigt markiert aber mir ging über Nacht da noch was durch den Kopf und ich hoffe dass Ihr mir nochma helfen könnt

Und zwar gehts immer noch um onMouseOver und onMouseOut (deswegen hab ichs auch gleich mit hier rein geschrieben), aber diesmal soll nicht das Bild geändert werden wo drüber gegangen wird, sondern ein anderes. Habe schon versucht statt this.src=... die ID oder Namen vom anderen Bild zu nehmen, leider ohne Erfolg.

Danke mal wieder im vorraus

MfG Timää

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

Betriebssysteme: Windows Vista

Profanversion: XProfan 11

20.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Du kannst

Kompilieren Markieren Separieren

<img src=someUrl id=thisIsMyId1>
<img src=someUrl id=thisIsMyId2>
<img src=someUrl id=thisIsMyId3>

kombinieren mit

Kompilieren Markieren Separieren

;document.getElementById(thisIsMyId1).src=someUrl
;document.getElementById(thisIsMyId2).src=someUrl
;document.getElementById(thisIsMyId3).src=someUrl

wonach auch

Kompilieren Markieren Separieren

<img src=someUrl id=thisIsMyId1 onMouseOver=document.getElementById(thisIsMyId3).src=someUrl>
<img src=someUrl id=thisIsMyId3>

funktioniert.

PS: Natürlich kann man auch in bereits als Erledigt markierten Threads weiter agieren, das Erledigt bezieht sich auf die Hauptaufgabe.

20.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Tim
Hannemann

Du bist Super ^^
Klappt wunderbar

danke vielmals

MfG Timää

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

Betriebssysteme: Windows Vista

Profanversion: XProfan 11

20.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

Gern geschehen. ^^

20.05.2009 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

- Seite 2 -

Möchte man mehrere CSS-Attribute eines Elementes "auf einen Schlag" per JS ändern bietet sich auch element.className an - wusste ich damals noch nicht.

14.10.2010 ▲

Vollständiges Zitat

Absatzweise zitieren Zeilenweise zitieren

◄