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

Scubamarco · #1 02.02.07, 11:45

Ich habe versucht es aus Ylloh Beautybattleseite zu kopieren, bin aber
gescheitet, weil da resized wird und all sowas.
Könnte mir vielleicht jemand den Quellcode für eine einfache Seite posten?
Hintergrund schwarz
Rand oben und links 10pixel
Bild nachher gleich zu sehen
Bild vorher beim überfahren mit der Maus zu sehen
darunter in kleiner Schrift "Für das Original mit Maus über das Bild fahren"
kein resize der Bilder

Wäre schön, wenn einer die fünf Minuten für mich hätte
Danke

**phoenix** · #2 02.02.07, 12:24

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>untitled_1</TITLE>
  
<style type="text/css">
  #wechsel a {
    background: url(vorher.gif) no-repeat;
    display:block; width:300px; /* Linkbereich begrenzen */
  }
  #wechsel img {
    display:block; width:300px; height:300px; 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:300px; margin-right:0; /* Workaround fuer IE 5.01 */
  }
</style>
  
 </HEAD>
 <BODY bgcolor="#000000" text="#FFFFFF">
 
<p id="wechsel">
  <a href="#wechsel"><img src="nachher.gif" alt="" /></a>
</p>

<p>F&uuml;r das Original mit Maus &uuml;ber das Bild fahren</p>
 
 </BODY>
</HTML>

**Ylloh** · #3 02.02.07, 12: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

Scubamarco · #4 02.02.07, 12:53

habe mir aus euren beiden Sachen was zusammengestoppelt.

Code:

<html>
<head>
<title>Beautyretouche</title>

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

  #wechsel a {
    background: url(Vorher.jpg) no-repeat;
    display:block; width:527px; /* Linkbereich begrenzen */
  }
  #wechsel img {
    display:block; width:527px; height:800px; 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>



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

</body>

Kann man die Größenbeschränkung des Bildes nicht weglassen und das Bild
wird automatisch in der nativen Auflösung angezeigt?

Vielen Dank euch beiden.

**phoenix** · #5 02.02.07, 13:38

Neuer Versuch, ohne CSS:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beautyretouche</title>

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

</head>


<body>
<img src="Nachher.gif" onmouseover="this.src='Vorher.gif'" onmouseout="this.src='Nachher.gif'">
<p>Für das Original mit Maus über das Bild fahren</p>
</body>
</html>

Scubamarco · #6 02.02.07, 14:44

ja funktioniert jetzt super. Mußte nur aus .gif die Endung .jpg machen.
Danke

**phoenix** · #7 02.02.07, 15:05

Meine Testgrafiken waren Gif, sry

**Ylloh** · #8 02.02.07, 19:52

Denk aber drean, dass es auch Leute geben soll, die Javascript nicht zulassen, die sehen dann auf der Webseite gar nichts

Scubamarco · #9 02.02.07, 20:41

ist den die letzte Lösung von Phoenix mit JAVA?

**Ylloh** · #10 02.02.07, 20:48

nicht Java, aber Javascript

Ä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 10:59
Effekt	tausendlocke	Hilfestellung, Tipps und Tricks	10	22.02.10 21:42
Was ist das für ein Effekt ???	pure-m	Hilfestellung, Tipps und Tricks	3	02.08.08 17:20

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