[ERLEDIGT] Grafik mit MouseOver Text!?

[ohnoitsroger]

ich habs mir irgendwie gedacht das es falsch is, wollts aber nicht wahr haben...xD

ich glaub ich bezahl jemanden der mir das macht....

 

[SpiceLab]

Vom Grundsatz her muß die Zeile so lauten:

<area shape="poly" href="http://en.wikipedia.org/wiki/Monkey" coords="929,314,968,354" />

Ob das tatsächlich alle Koordinaten sind, weißt nur Du.

 

[ohnoitsroger]

Vom Grundsatz her muß die Zeile so lauten:

<area shape="poly" href="http://en.wikipedia.org/wiki/Monkey" coords="929,314,968,354" />

Ob das tatsächlich alle Koordinaten sind, weißt nur Du.

Ich hab die aus dem html code von der vorherigen seite, vermutlich liegt da auch der Fehler :/

 

[SpiceLab]

Ich hab die aus dem html code von der vorherigen seite, vermutlich liegt da auch der Fehler :/

Wenn's dort auch nicht funktioniert, wird's so sein.

 

[ohnoitsroger]

Funktioniert ja beim html, aber die hover/mouseover grafik is riesig und ich grieg sie nicht kleiner und der hintergrund verschwindet beim mouseover effect,....

 

[SpiceLab]

Du solltest Dir mal die Grafiken aus dem Beispiel genauer anschauen, und was sie von Deiner unterscheidet:

1. http://www.cssplay.co.uk/menu/animalmap/animalDefault.png
2. http://www.cssplay.co.uk/menu/animalmap/monkeyPanel.png
3. http://www.cssplay.co.uk/menu/animalmap/vulturePanel.png
4. ...

Ich vermute nämlich allmählich, dass auch hier eine Fehlerquelle in Deinem "Konzept" verborgen ist.

 

[ohnoitsroger]

Meine sind transparent, aber klappt auch nicht ohne transparents also das kanns nicht sein,...

Ode meinst du jetzt was anderes?

 

[SpiceLab]

Kleiner Tipp: die weißen Flächen in animalDefault.png sind in Wahrheit durchsichtig, worin die einzelnen Hover-Bilder erscheinen.

 

[ohnoitsroger]

und ich vermute mal weil die grafiken von den tieren im hintergrund aufscheinen?

 

[SpiceLab]

und ich vermute mal weil die grafiken von den tieren im hintergrund aufscheinen?

Korrekt

Und diese durchsichtigen Flächen sehe ich in Deiner Grafik nicht.

 

[ohnoitsroger]

Sag das doch gleich
Ne spass danke :) dann muss ich jetzt, puuh kompliziert....

 

[SpiceLab]

dann muss ich jetzt, puuh kompliziert....

... die Grafik in Deinem bevorzugten Grafikprogramm entsprechend aufbereiten.

 

[SpiceLab]

Hab nun den alles entscheidenen Fehler gefunden

Im Original kommt neben http://www.cssplay.co.uk/menu/animalmap/animalDefault.png (= Hintergrundbild für .backer) noch http://www.cssplay.co.uk/menu/animalmap/animalBlank.png (= <img>-Element) zum Einsatz.

Du verwendest hier aber ein und dieselbe Grafikdatei für beides.

Referenziere ich in Deinem Code spaßeshalber "animalBlank.png" für <img> und wähle rechteckige Koordinaten, um die Stelle leicht wiederzufinden (oben links in der Grafik), erscheinen auch Hover-Bild u. -Text.

Online-Demo: https://jsfiddle.net/spicelab/12ns7kvh/

 

[ohnoitsroger]

du machst mich fertig...xD

Also im prinzip dann vorne die MainMapgrafik mit dem freigestellten teilen und für .backer könnt ich die ganze grafik verwenden, wenn ich das richtig verstehe!?

 

[djheke]

Wobei die Grafiken sehr schlecht zu lesen sind. Nimm doch normale Schriften.

 

[SpiceLab]

Also im prinzip dann vorne die MainMapgrafik mit dem freigestellten teilen und für .backer könnt ich die ganze grafik verwenden, wenn ich das richtig verstehe!?

Damit keine Mißverständnisse aufkommen, hier der Quellcodeauszug bzgl. der Grafiken:

.backer {...; background:url(http://onceafterdeath.com/Map/OADmappunktecoord.png); ...;}
...
area:nth-of-type(1):hover ~ span:before {content:url(http://onceafterdeath.com/Map/Gabyshaus.png);}

...
   <img class="imageMap" src="http://www.cssplay.co.uk/menu/animalmap/animalBlank.png" usemap="#animalmap">
...

 

[SpiceLab]

Wobei die Grafiken sehr schlecht zu lesen sind. Nimm doch normale Schriften.

Unter dem Aspekt des Fein-Tunings

 

[djheke]

Mal über Heli Hovern, Bus und Tanke normal
http://www.gipspferd.de/forumhilfe/karte/karte.html

 

[SpiceLab]

Mal über Heli Hovern
http://www.gipspferd.de/forumhilfe/karte/karte.html

Und beim Bus bitte etwas größer und eine kontrastreichere Schriftfarbe wählen

 

[djheke]

Spass