Bild je nach Link wechseln

hey,

ich brauch von euch mal Hilfe was JavaScript anbetrifft,
das kann ich so etwa garnicht :ps:

Zwar möchte ich auf einer Musikseite die Follow Me Page zum Thema passend nett gestalten,
habe mir hierfür etwas überlegt und da bereits 4 Bilder gemacht,
dies wird wohl nur über JS möglich sein, zwar soll jedem Link ein anderes Bild zugewiesen sein.

Es gibt ein Standard Bild welches da ist, wenn man die Seite aufruft. Fährt man z.B. mit der Maus auf den Link „Soundcloud“ so soll automatisch das Standardbild (hier facebook.png) zu soundcloud.png wechseln. Fährt man dann erneut über einen Link z.B. YouTube so soll entsprechend auch das aktive Bild gegen das Bild youtube.png getauscht werden.

Wenn ihr euch die Bilder mal anschaut werdet ihr sehen aus welchem Grund dies so sein soll,
da sich nämlich die in dem Bild erkennbaren Schallplatten verschieden überschneiden und immer das Portal was man gerad ausgewählt hat, von diesem soll sich die Schallplatte in den Vordergrund schieben.

hier mal die bilder:
facebook.png (=standard)

soundcloud.png (soll erscheinen wenn man mit der maus auf den entsprechenden Link klickt, fortfolgend bei den nächsten beiden bildern)

twitter.png

youtube.png

wenn bereits jemand ein script hat wäre ich auch gern bereit dieses zu nutzen,
anderenfalls sind tutorials bzw. verschiedene ansätze auch schon hilfreich, dann muss ich da selber ein bischen mehr ausprobieren :wink:

danke euch!

ciao

Hi,

[code]

[/code]

lg flo

//edit: der unter html teil ist einfach mit gimp generiert worden (Bild öffnen =>Filter => Web => imagemap) und der javascript teil hab ich selber geschrieben sollte functionieren … ob man des auch einfacher machen hätte können ka^^hab mit js nicht so viel am hut

//edit2: Hier ein link http://www.imagesandmore.net/tests-fuer-nette-aus-bplaced-forum/18369.php

//edit3: Ich würde nur beim youtube.png bild des facebook noch hinter des soundcloud tun :wink:

hey,

danke! sieht doch schonmal nach nem guten anfang aus,
passieren tut da aktuell aber noch garnichts,
abgesehen davon das halt das standard bild nun angezeigt wird.

steht das zeug von GIMP nun für irgendwas bereits?

es soll ja keine extra links darunter geben,
sondern so etwa der innere bereich der jeweiligen platte,
sozusagen das “cover” wo die namen der netzwerke stehen soll darauf ansprechen,
sodass dort mit dem mouseover die platte nach vorne springt.

liebe grüsse

Hi,

also bei mir funktioniertes unter meinem link ^^ mit firefox
du musst nur in die mitte der schallplatte und am anfang ca 10 sec warten bis alle bilder verfügbar sind

lg flo

Hi,

bitte schön
Beweiß video das es funktioniert :stuck_out_tongue: (am anfang is des video grau ka warum ab der hälfte gehts dann)
youtube.com/watch?v=TgiLAabF … ata_player

lg flo

//edit: Bei 0:08 geht des Video :wink:

//edit2: Geht auch mit Safari :wink:

hi,

liegt es evtl. daran dass ich es in wordpress drin hab?

es muss ja dennoch eine Seite im System sein,
habe es aber über den HTML Modus direkt in den leeren editor eingegeben,
sieht jedoch irgendwie merkwürdig aus, …

aber wenigstens schon einmal klasse das es überhaupt funktioniert.
bleibt natürlich ein problem wenn es im wordpress dann garnicht laufen will,
doch ich wüsste nicht warum es da mit ausgeschaltetem WYSIWYG Editor nicht gehen sollte?

grüsse

edit: soar als reine HTML Datei gehts bei mir auch, schaut echt fett aus :slight_smile: problem ist jetzt wohl offenbar das ding in wordpress zum laufen zu kriegen…hm…
die grafischen feinheiten kann man dann noch umsetzen mir ist gerad dasselbe aufgefallen wie dir :wink:

Hi,

wie auch bei allen andern :stuck_out_tongue:
Gib doch nen Link zu der Seite her :ps: dann kann man des genauer sagen worands ggf. liegt

lg

//edit hatte schonmal des problem das wordpress (oder jomlaa keine ahnung mehr) den html code vorm speichern noch mal ändert was natürlich ärgerlich ist da der somit nicht funktioniert … da hilfts nur wenn du des direkt in der datenbank selber speicherst (via phpmyadmin) und dann nicht mehr in wordpress änderst …

hey,

nochmal hier öffentlich ein dankeschön,
es hat dann letztendlich nach ein paar codeänderungen (schien jedenfalls so als hätte er nochwas geändert :ps: ) funktioniert.

die seite an der ich arbeite ist noch nicht released, daher habe ich weiteres per PM mit ihm geklärt, läuft nun aber alles :slight_smile:

greetz

Hi,

hier der nochmal überarbeitete Code (geht ja auch ohne function)

[code]

[/code]

lg flo

Für das braucht man kein Javascript:

Positioniere die Elemente per CSS überlappend, und setze eine absteigende z-index Reihenfolge als Standard. Dann verwendest du die CSS-hover-Klasse um das Bild nach vorne zu holen.

Bildquellen per JS zu ändern ist, mit Verlaub, ganz schlechter Stil.
93% aller Fälle lassen sich garantiert mit reinem CSS lösen. Michi hat da schon die entsprechende Antwort gegeben.
Gutes Stichwort ist hier auch CSS-Sprites, für den Fall aber weniger geeignet (machbar durchaus).

hm joar hatte ich so noch nicht drüber nachgedacht da ich bereits ein anderes script hatte was ich dann einfach auch für das projekt hier verwendet hab, dementsprechend schien mir das hier ähnlich wodurch ich auch nach ner JS lösung gefragt hab.

CSS ist für mich nun ansich kein großes problem, mit solchen details hab ich mich allerdings auch noch nicht wirklich auseinander gesetzt, d.h. da müsst ich auch erstmal schauen wie man das evtl. machen kann.

grüsse

.

Hey,

sorry aber was bringt das? …
lg flo

//edit: Find jetz grad dein Thema nicht aber ging um die Seite zmijuga.bplaced.net/forum/ip.php mit dem Betriebssystem anzeigen