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

Photoshop-Cafe.de :: Dein Photoshop-Forum (https://www.photoshop-cafe.de/forum/index.php)

- Hilfestellung, Tipps und Tricks (https://www.photoshop-cafe.de/forum/forumdisplay.php?f=30)

- -

Mouse Over Effekt (https://www.photoshop-cafe.de/forum/showthread.php?t=2353)

Mouse Over Effekt

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

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>

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 ;)

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.

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>

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

Meine Testgrafiken waren Gif, sry :)

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

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

nicht Java, aber Javascript

und so wäre ohne Javascript?

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 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?

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.