| Autor |
Nachricht |
biglproductions
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Mi 24.06.2009 21:52
Titel Imagemap mit Mousover |
  |
|
Hallo!
Ich bin neu im Forum, ich hoffe aber ich hab den richtigen Thread erwischt...
Ich möchte eine Website bauen, in klassischem HTML, mit etwas CSS unter Umständen mit JavaScrpit (lieber nicht!).
Das Problem:
Das Menü (mit 4 Links) ist ein Bild als Imagemap: http://biglprod.bi.funpic.de/oldpaper/test.html
ich möchte nun den Effekt bringen, dass wenn man mit der Maus über einen Link fährt die anderen Links unscharf werden (auch das hab ich als Bild).
Wie das aussehen soll seht ihr hier:
http://biglprod.bi.funpic.de/oldpaper/oldpaper.html
Der Standart soll also wie im ersten Link sein, wenn man mit der Maus über "Home" fährt soll es so aussehen wie im zweiten Link.
Ich hab schon lange rumprobiert und bin auf keine Lösung gestoßen.
Wäre euch für Hilfe sehr Dankbar.
bigLprod.
PS:
Hier der Code für die Imagemap:
| Code: |
<img src="menu/menuhome.png" width="783" height="80" border="0" usemap="#map" name="menu">
<map name="map">
<area shape="rect" coords="1,24,149,78" alt="Home" href="index.html" />
<area shape="rect" coords="198,17,347,72" alt="Info" href="info.html" />
<area shape="rect" coords="398,11,554,73" alt="Shop" href="shop.html" />
<area shape="rect" coords="596,3,780,60" alt="Links" href="links.html" />
</map>
|
Das Bild auf dem Home dunkelblau ist heist menuhome.png, dass auf dem die anderen unscharf sind menuhomea.png
Zuletzt bearbeitet von biglproductions am Mi 24.06.2009 21:53, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 25.06.2009 09:42
Titel
|
|
|
Das wird mit ner IMagemap nicht funktionieren also am besten gleich wieder vergessen. Wieso zerlegst du das ganze Bild nicht in vier seperate Bilder, für jeden Punkt halt eine. Dann setzt du einfach vier Links rein mit je ner anderen id (home, info, shop und links) und definierst im CSS folgendes dafür:
| Code: |
a#home{background-image:url('pfad zum home inactive'); width:breite der grafik in pixel; height:höhe der grafik in pixel; text-indent:-999999px; display:block;}
a#home:hover{background-image:url('pfad zum home active'); width:breite der grafik in pixel; height:höhe der grafik in pixel; text-indent:-999999px; display:block;}
|
| Code: |
<a href="#" id="home">Home</>
|
Das text-indent: -99999px; verschiebt hier den Text des Links um die entsprechenden Pixel nach links aus dem Bild. So siehst du nur die Hintergrundgrafik und hast dennoch Text im Link stehen falls CSS deaktiviert ist.
Zuletzt bearbeitet von DesignKater am Do 25.06.2009 09:43, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
biglproductions
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 25.06.2009 16:49
Titel
|
|
|
Dann ist aber ja nur Home verändert, es sollen sich aber dei andern drei auch verändern.
Ich probier mal damit rum, mal schaun was sich machen lässt.
Geht dass sicher nicht mit Javascript? Beim GIMP Plug In für Imagemaps mit dem ich die mache kann man für jedes Feld ein OnMousover angeben. Leider kann ich kein Javascript. Kann man nicht eine Aktion einführen, die das Bild verändert?
Ich probiers aber erstmal mit CSS.
Danke für die Hilfe!
Chris
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 25.06.2009 16:54
Titel
|
|
|
| biglproductions hat geschrieben: | Dann ist aber ja nur Home verändert, es sollen sich aber dei andern drei auch verändern.
|
Na du musst natürlich für die andern drei Buttons auch je eine id definieren, Home ist das erste Beispiel. Den einfach kopieren und entsprechend anpassen. Bischen logisches Denken setz ich einfach mal voraus.
|
|
| |
|
|
biglproductions
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 25.06.2009 17:18
Titel
|
|
|
Der Witz ist, dass sich home nicht nur verändern soll wenn man mit der Maus drüberfährt, sondern wenn man mit der Maus über einen anderen Link fährt...
Da bin ich im Moment noch ratlos...
|
|
| |
|
|
biglproductions
Threadersteller
Dabei seit: 24.06.2009
Ort: -
Alter: -
Geschlecht:
|
|
| |
|
|
Das_Brot
Dabei seit: 26.06.2009
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 26.06.2009 15:49
Titel
|
|
|
Jetzt siehts aber nicht schlecht aus, ist zwar wahrscheinlich nicht so, wie du es gedacht hast, aber sieht trotzdem cool aus! 
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 26.06.2009 15:52
Titel
|
|
|
Lass es doch so. Für alles andere brauchst du JavaScript und wenn du nichmal CSS kannst... Aber Frage: Wieso ist immer der aktive Button unscharf und nicht die inaktiven? So wie es jetzt ist machts wenig Sinn. Fokus Junge, Fokus!
Zuletzt bearbeitet von DesignKater am Fr 26.06.2009 15:54, insgesamt 2-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit JS mousover
Als Anfänger Galerie mit MousOver in Flash - machbar?
Ebene einblenden bei Mousover und an Mauszeiger halten
mousover DIV ein-/ausblenden Problem (z-index, verzögerung)
css imagemap
Imagemap mit Mouseover
|
|
Willkommen auf dem Portal für Mediengestalter
