mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 00:52 Benutzername: Passwort: Auto-Login

Thema: CSS Hover-Image-Map anklickbar machen? vom 24.07.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS Hover-Image-Map anklickbar machen?
Seite: 1, 2  Weiter
Autor Nachricht
Farbmalkasten
Threadersteller

Dabei seit: 14.08.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst So 24.07.2011 17:37
Titel

CSS Hover-Image-Map anklickbar machen?

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich arbeite gerade an einer Image Map, die so aufgebaut ist, wie diese von Stu Nicholls:

Hier klicken zum Anschauen

Jetzt habe ich das Problem, dass die Textboxen nur sichtbar sind, wenn man darüber hovert, aber sobald man das Gesicht verlässt verschwindet auch die Textbox.

Weiß jemand von euch, wie ich zusätzlich zum Hover-Effekt die Boxen um die Gesichter auch noch anklickbar machen kann, damit der Text unten stehen bleibt?

Ich hoffe ich habe mich verständlich ausgedrückt, es ist schwer das zu beschreiben.

Bin für jede Hilfe echt dankbar!

Viele Grüße

Farbmalkasten
  View user's profile Private Nachricht senden
Farbmalkasten
Threadersteller

Dabei seit: 14.08.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.07.2011 12:34
Titel

Antworten mit Zitat Zum Seitenanfang

Hat wirklich niemand von euch eine Idee, wie man das umsetzen kann? *Schnief*

Ich verzweifel hier langsam *Schnief*

Habe alles probiert und ich muss die Seite so schnell wie möglich online setzen, aber ohne die Image Map kann ich das leider vergessen *Schnief*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.07.2011 13:10
Titel

Antworten mit Zitat Zum Seitenanfang

jQuery toggle();
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mo 25.07.2011 13:23
Titel

Antworten mit Zitat Zum Seitenanfang

Ich würde mal versuchen zusätzlich zum :hover die entsprechenden Stellen mit :active und :focus zu ergänzen.

Hier mal passent zu dem Beispielscript:
Code:
/* set up the font to be used for the page */
body {font-family: tahoma; arial, sans-serif;}

/* set the size of the definition list <dl> and add the background image */
#imap {display:block; width:400px; height:240px; background:url(../images/beatles_basic.jpg) no-repeat; position:relative;}

/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {display:block; width:400px; height:0; padding-top:240px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(../images/beatles_hover.jpg) no-repeat 400px 400px; cursor:default;}
/* the hack for IE pre IE6 */
* html #imap a#title {height:240px; he\ight:0;}

/* the <dt><a> hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}

/* place the <dd>s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #picp {left:36px; top:46px; z-index:20;}
#imap #picr {left:113px; top:76px; z-index:20;}
#imap #picj {left:192px; top:50px; z-index:20;}
#imap #picg {left:262px; top:60px; z-index:20;}

/* style the <dd><a> links physical size and the background image for the hover */
#imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {display:block; width:85px; height:85px; background:transparent url(../images/hover.gif) -100px -100px no-repeat; text-decoration:none; z-index:20;}

/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}

/* move the link background image to position 0 0 when hovered */
#imap a#paul:hover, #imap a#ringo:hover, #imap a#john:hover, #imap a#george:hover,
#imap a#paul:focus, #imap a#ringo:focus, #imap a#john:focus, #imap a#george:focus,
#imap a#paul:active, #imap a#ringo:active, #imap a#john:active, #imap a#george:active {background-position:0 0;}

/* define the common styling for the span text */
#imap a:hover span,
#imap a:focus span,
#imap a:active span {position:absolute;  width:388px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}
/* the hack for IE pre IE6 */
* html #imap a:hover span {width:400px; w\idth:388px;}

/* move the span text to a common position at the bottom of the image map */

#imap a#paul:active span,
#imap a#paul:focus span,
#imap a#paul:hover span {left:-36px; top:200px;}

#imap a#ringo:active span,
#imap a#ringo:focus span,
#imap a#ringo:hover span {left:-113px; top:170px;}

#imap a#john:active span,
#imap a#john:focus span,
#imap a#john:hover span {left:-192px; top:196px;}

#imap a#george:active span,
#imap a#george:focus span,
#imap a#george:hover span {left:-262px; top:186px;}

/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}

#ads {margin-top:150px;}



Wobei ich das jetzt nur im FF5 getestet habe. Ich vermute mal, dass Kraken-Chrome das nicht mitmacht...


Zuletzt bearbeitet von top am Mo 25.07.2011 13:31, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Farbmalkasten
Threadersteller

Dabei seit: 14.08.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 25.07.2011 14:08
Titel

Antworten mit Zitat Zum Seitenanfang

VIELEN DANK!

Die Variante von dir top reicht vollkommen aus und erzielt genau das Ergebnis, was ich erreichen wollte! Lächel

Ihr seid super! Lächel
  View user's profile Private Nachricht senden
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Mo 25.07.2011 14:43
Titel

Antworten mit Zitat Zum Seitenanfang

Wie gesagt:
top hat geschrieben:
... Ich vermute mal, dass Kraken-Chrome das nicht mitmacht...
Schau mal wie es bei dir mit dem blöden Chrome aussieht. Hatte vor einiger Zeit mal was ähnliches gemacht. (Allerdings nur Text und keine Bilder.) Als kurz darauf Chrome raus kam und es dort ums verrecken nicht laufen wollte war das schon ärgerlich. Wenn du es dort auch irgendwie hinbekommst, würde ich mich über eine Rückmeldung freuen. Dann schaue ich mir das mal an ob ich das bei mir übertragen bekomme.

Bisher habe ich mir einfach gesagt: Sch*** auf diesen Browser... Grins
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 25.07.2011 15:19
Titel

Antworten mit Zitat Zum Seitenanfang

Ziemlich naive Einstellung ---
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 25.07.2011 15:34
Titel

Antworten mit Zitat Zum Seitenanfang

bacon hat geschrieben:
Ziemlich naive Einstellung ---


Habe ich mir auch gedacht. Könnte ein Enwtickler bei United Prototype sein. Die schaffen es nicht Ihre JavaScripte für den Opera anzupassen und werfen als erklärung folgendes in den Raum

Zitat:
Nein, es gibt Unterschiede bei der Programmierung für die Browser und Opera gehört zu den Browsern, die von weniger Menschen genutzt werden, deshalb passen wir unsere Features nicht auch noch für Opera an.
  View user's profile Private Nachricht senden
 
Ähnliche Themen CSS3 image hover
Image hover tooltip
hover-Button/hover-Bild wird darunter eingefügt
Ein Link der nicht anklickbar ist
Link hinter transparenter PNG anklickbar machen
Suche animierte Weltkarte/Kugel die dann anklickbar wird
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.