PDA

Vollständige Version anzeigen : Web-Design Mouse Over Effekt

Scubamarco
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
02.02.07, 12:24
<!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
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:

<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&uuml;r das Original mit Maus &uuml;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
02.02.07, 12:53
habe mir aus euren beiden Sachen was zusammengestoppelt.

<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
02.02.07, 13:38
Neuer Versuch, ohne CSS:

<!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
02.02.07, 14:44
ja funktioniert jetzt super. Mußte nur aus .gif die Endung .jpg machen.
Danke
phoenix
02.02.07, 15:05
Meine Testgrafiken waren Gif, sry :)
Ylloh
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
02.02.07, 20:41
ist den die letzte Lösung von Phoenix mit JAVA?
Ylloh
02.02.07, 20:48
nicht Java, aber Javascript
Scubamarco
02.02.07, 21:10
und so wäre ohne Javascript?

<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 der Maus über das Bild fahren</p>

</body>

braucht es dann auch die Größenbeschränkung für die Bilder?
Oder ist das für den Bereich des Mouse-Over-Effektes?
phoenix
02.02.07, 21:59
Ja da hat Ylloh recht, wenn Javascript deaktiviert ist funktioniert die Methode nicht.
Ich werd mal schaun das ich die CSS Variante angepasst bekomme.

*edit*
Die erste Variante ist CSS und funktioniert mit jedem Browser der CSS unterstützt.

Du brauchst die Grössenangabe nur um den Klickbereich zu definieren.