Web-Design Mouse Over Effekt - Photoshop-Cafe.de :: Dein Photoshop-Forum

**Ylloh** · #3 02.02.07, 11:32

willst du es "Barrierefrei" Lösen, so wie es auf der Battlepage ist? Also nur mit CSS oder mit Javascript?

Den Code für die CSS-Variante hier:

Code:

<html>
<head>
<title>hover-Marco</title>

<style type="text/css">
body{
font-family:Verdana,Tahoma,Arial;
font-size:12px;
color:#333333;
background-color:#F1F1F1;
margin:10px;
}

  #wechsel a {
    background: url(orginal_Name.jpg) no-repeat;
    display:block; width:334px; /* Linkbereich begrenzen */
  }
  #wechsel img {
    display:block; width:334px; height:500px; border:0;
  }
  #wechsel a:hover img {
    visibility: hidden;
  }
  #wechsel a:hover { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel a {
    margin-right:1px;
  }
  * html #wechsel a:hover {
    width:334px; margin-right:0; /* Workaround fuer IE 5.01 */
  }
</style>

</head>
<body>



<h1>Name des Bildes</h1>
<p id="wechsel">
  <a href="#" target="_blank"><img src="Bild_NEU.jpg" alt="Name" /></a>
</p>
<p>Für das Original mit Maus über das Bild fahren</p>

</body>
</html>

Was du ändern mußt:

background: url(orginal_Name.jpg) no-repeat; Den Bildnamen angeben

display:block; width:334px; die Breite des Bildes einstellen bzw, darunter auch die Höhe

<h1>Name des Bildes</h1>
<p id="wechsel">
<a href="#" target="_blank"><img src="Bild_NEU.jpg" alt="Name" /></a>
</p>
<p>Für das Original mit Maus über das Bild fahren</p>

Sachen entsprechend ergänzen, Bilder in den gleichen Ordner und es müßte klappen

Wenn nicht schick mir den Link einfach mal per PN/ICQ

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Zur Linear-Darstellung wechseln Zur Hybrid-Darstellung wechseln Baum-Darstellung

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Software Karte in Flash, bei Mouse-over soll Adresse und E-mail angezeigt werden!	Ramira	Installation, Konfiguration, Hardware und Software	15	23.07.10 09:59
Effekt	tausendlocke	Hilfestellung, Tipps und Tricks	10	22.02.10 20:42
Was ist das für ein Effekt ???	pure-m	Hilfestellung, Tipps und Tricks	3	02.08.08 16:20

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)