Bild wechseln an anderer Stelle

[sandra]

Hallo NG

Ich brauche mal wieder Hilfe oder nen Deckanstoß.

Beispielseite hier: http://www.pixli.de/neu/

Ich habe auf der linken Seite meine Produktnavigation. Die wird sehr lang, es werden ca. 30 Produkte oder mehr.
Im mittleren Teil steht oben eine Bild (Wechselbild).
Das soll wechseln, wenn ich mit der Maus über die Produktnavigation fahre.
Fahre ich mit der Maus über Produkt AA, soll ein Bild (Wechselbild) von dem Produkt zu sehen sein usw..
Ich hoffe ich habe mich verständlich ausgedrückt.

Momentan fehlt mir die Idee wie ich es geschickt und gut umsetzte.
Ich dachte schon an nen Tooltipp, aber da komme ich nicht weiter.

Vielen Dank für eure Tipps

sandra

[Felix Riesterer]

Liebe sandra,

wenn Deine Lösung rein auf CSS aufsetzen soll, dann wirst Du Benutzer des IE6 ausschließen, da dieser mit seinen CSS-Mitteln das sicherlich nicht zufriedenstellend umsetzen kann... oder nur mit vielen Tricks.

Eine Möglichkeit wäre, dass man dem Link in der Navi ein Bild mitgibt. Etwa so wie hier:
<a href="profukt_aa.html">AA <img src="/images/aa_wechsel.jpg" alt="" /></a>

Mittels absoluter Positionierung kann man dann bei a:hover img { display:block; } das Bild erscheinen lassen, das ansonsten mit display:none unsichtbar bleibt. Und durch die absolute Positionierung kannst Du es ja genau dort erscheinen lassen, wo Dein "Wechselbild" eben sein soll.

Liebe Grüße,

Felix Riesterer.

[Malcolm Beck´s]

hi,

Eine Möglichkeit wäre, dass man dem Link in der Navi ein Bild mitgibt. Etwa so wie hier:
<a href="profukt_aa.html">AA <img src="/images/aa_wechsel.jpg" alt="" /></a>

Da könnte man doch eben so gut irgendein inline-Element nehmen und auf diese Weise verfahren.
<a href="profukt_aa.html">AA<span></span></a>

<span> auf display:block; setzen und aus dem sichtbaren bereich ziehen, bei hover mit Hintergrundbild an der gewünschten Position einblenden; sollte selbst der IE ab 6 auf die Kette kriegen.

mfg

[Malcolm Beck´s]

hi,

sollte selbst der IE ab 6 auf die Kette kriegen.

Sag ich doch und sogar viel mehr, als nur auf die Kette kriegen. Ich konnte es mir nicht verkneifen, ein Bsp. anzufertigen. Bei der Gelegenheit habe ich es in eine heutzutage Typische Homepage-umgebung gepackt und hochgeladen.

/selfhtml/special-tooltip

mfg

[Marc]

Hallo,

sollte selbst der IE ab 6 auf die Kette kriegen.

Sag ich doch und sogar viel mehr, als nur auf die Kette kriegen. Ich konnte es mir nicht verkneifen, ein Bsp. anzufertigen. Bei der Gelegenheit habe ich es in eine heutzutage Typische Homepage-umgebung gepackt und hochgeladen.

/selfhtml/special-tooltip

Das gibt es doch schon: Mister Meyer machts möglich

Viele Grüße,
Marc.

[Malcolm Beck´s]

hi,

/selfhtml/special-tooltip

Das gibt es doch schon: Mister Meyer machts möglich

Ja, aber die Seite sieht doch voll Öde aus ...

Zumal du beide Versionen ohne CSS geniessen solltest. Ich würd sagen, in Zukunft besser auf meine "Modern Woodstock"-Version verlinken, wenn jemand fragt :)
Die Entwicklung des CSS, rein von der Funktionalität her, hat mich übrigens keine 20 Minuten gekostet; gut, dass Gesamte Seitenlayout brauchte deutlich länger, dafür macht es aber Ordentlich was her, oder?

mfg

[Marc]

Hallo,

/selfhtml/special-tooltip

Das gibt es doch schon: Mister Meyer machts möglich

Ja, aber die Seite sieht doch voll Öde aus ...

Zumal du beide Versionen ohne CSS geniessen solltest. Ich würd sagen, in Zukunft besser auf meine "Modern Woodstock"-Version verlinken, wenn jemand fragt :)

Vielleicht ist es aber auch Absicht, dass die Bilder bei Meyer auch ohne CSS erreichbar sind - vielleicht sollte ich in Zukunft auf beide Versionen verweisen. Dann kann sich jeder aussauchen was für seinen Fall besser passt. Einige Unterschiede gibt es ja doch, die passende Lösung hängt vom Einsatzzwecke ab.

Die Entwicklung des CSS, rein von der Funktionalität her, hat mich übrigens keine 20 Minuten gekostet;

Bravo, bravissimo! :-)

gut, dass Gesamte Seitenlayout brauchte deutlich länger, dafür macht es aber Ordentlich was her, oder?

Ja, schade dass ich da nicht selber drauf gekommen bin - solche Perlen findet man immer seltener im Web. :-)

Viele Grüße,
Marc.

[Malcolm Beck´s]

hi,

Vielleicht ist es aber auch Absicht, dass die Bilder bei Meyer auch ohne CSS erreichbar sind - vielleicht sollte ich in Zukunft auf beide Versionen verweisen. Dann kann sich jeder aussauchen was für seinen Fall besser passt. Einige Unterschiede gibt es ja doch, die passende Lösung hängt vom Einsatzzwecke ab.

Stimmt schon.
Aber ich würde die Validere Version vorziehen, immer :)

gut, dass Gesamte Seitenlayout brauchte deutlich länger, dafür macht es aber Ordentlich was her, oder?
Ja, schade dass ich da nicht selber drauf gekommen bin - solche Perlen findet man immer seltener im Web. :-)

Oder man merkt nicht auf anhieb, dass man auf eine Perle gestoßen ist ;)

mfg

[Marc]

Hallo Malcolm,

Vielleicht ist es aber auch Absicht, dass die Bilder bei Meyer auch ohne CSS erreichbar sind - vielleicht sollte ich in Zukunft auf beide Versionen verweisen. Dann kann sich jeder aussauchen was für seinen Fall besser passt. Einige Unterschiede gibt es ja doch, die passende Lösung hängt vom Einsatzzwecke ab.

Stimmt schon.
Aber ich würde die Validere Version vorziehen, immer :)

Meyer validieren? - Das ist Blasphemie! :-)

Aber der hat einfach keine alt-Attribute angegeben - sein Beispiel sollte auch mit alt-Attributen funktionieren - nur für das Archiv, damit nicht jemand denkt, ich poste invalide Beispiele... :-)

Viele Grüße,
Marc.

[Malcolm Beck´s]

hi Marc,

nur für das Archiv, damit nicht jemand denkt, ich poste invalide Beispiele... :-)

Mir ist noch aufgefallen, dass die funktionalität bei mir auch mit der Tab-Taste gegeben ist, dass dürfen wir dem Archiv nicht vorenthalten ;)

mfg

[Malcolm Beck´s]

hi Archiv,

auf die Gefahr hin, dass mein Bsp. irgendwann vom Netz genommen wird, halte ich es hier für die Nachwelt fest.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
<head>  
<title>Free Software GNU-Lizensiert!</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<style type="text/css">

ul {  
  width:10em;  
}  
a {  
  padding:5px 10px;  
  display:block;  
}  
a:focus, a:hover, a:active { /* Aufpassen! */  
  background:#6a5acd;   /* IE-Bug -- color oder transparent, hauptsache irgendwas */  
  color:#FFF;  
  border-color:#F00;  
}  
a span {  
  margin:0;padding:0;  
  visibility:hidden;  
  position:absolute;  
  left:-999px;  
  top:40px;z-index:2;  
  width:250px;    /* je nach Bedürfnis anpassen */  
  height:250px;   /* je nach Bedürfnis anpassen */  
}  
a:focus span, a:hover span, a:active span {  
  visibility:visible;  
  left:350px;       /* je nach Bedürfnis anpassen */  
  background:#FFF url(/image/wenn/hover.wai) no-repeat center;  
}

</style>  
</head>  
<body>  
<ul>  
 <li><a href="#">Testlink<span></span></a></li>  
 <li><a href="#">Testlink<span></span></a></li>  
 <li><a href="#">Testlink<span></span></a></li>  
</ul>  
</body>  
</html>

mfg