Supportnet / Forum / Webseiten/HTML
Beim überfahren einer Grafik neue Grafik öffnen
Frage
Hallo,
weiß jemand wie ich wenn ich zum Beispiel auf eine Grafik mit dem Coursor fahre sich ein neues Bild öffnet, was dann beim verlassen der Grafik auch wieder verschwindet?
Gibt es dafür einen einfachen HTML Code?
Antwort 1 von rfb
Zitat:
Gibt es dafür einen einfachen HTML Code?
Nein!Gibt es dafür einen einfachen HTML Code?
Das geht allenfalls mit JavaScript (Stichwort onmouseover - onmouseout) oder mit einiger Trickserei mit CSS (Stichwort hover), ist in keinem Fall einfach und definitiv kein HTML!
Antwort 2 von udek
Wie würde es denn in Java aussehen?
Antwort 3 von DerWahreDenny
Zitat:
oder mit einiger Trickserei mit CSS (Stichwort hover)
oder mit einiger Trickserei mit CSS (Stichwort hover)
Das ist doch keine Trickserei!
Wo :hover funktioniert, kann man es auch anwenden.
Ich halte es für die eleganteste Lösung.
@udek
du machst einen ganz normalen link mit html. dann definierst du mit css wie der link aussehen soll:
a:link {background-image:url(normalesbild.jpg);}
a:hover {background-image:url(mouseoverbild.jpg);}
Antwort 4 von udek
Kannst du mir mal ein komplettes Beispiel dazu schreiben. Wäre echt nett. Nur ein Beispiel zu einem Beispiellink
Antwort 5 von DerWahreDenny
<html>
<head>
<style type="text/css">
<!--
a:link {background-image:url(normalesbild.jpg);}
a:hover {background-image:url(mouseoverbild.jpg);}
-->
</style>
</head>
<body>
<a href="andereseite.htm">KlickMich</a>
</body>
</html>
alles klar?
<head>
<style type="text/css">
<!--
a:link {background-image:url(normalesbild.jpg);}
a:hover {background-image:url(mouseoverbild.jpg);}
-->
</style>
</head>
<body>
<a href="andereseite.htm">KlickMich</a>
</body>
</html>
alles klar?
Antwort 6 von udek
Danke!!!
Antwort 7 von rfb
Zitat:
Das ist doch keine Trickserei!
wenn es sich eigentlich ums Bild und nicht um die Deko eines Links dreht ist das schon "Trickserei".Das ist doch keine Trickserei!
Antwort 8 von web1
Oder besser mit Javascript:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function na_change_img_src(name, nsdoc, rpath, preload)
{
var img = eval((navigator.appName.indexOf(´Netscape´, 0) != -1) ? nsdoc+´.´+name : ´document.all.´+name);
if (name == ´´)
return;
if (img) {
img.altsrc = img.src;
img.src = rpath;
}
}
function na_preload_img()
{
var img_list = na_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i+1];
}
}
function na_restore_img_src(name, nsdoc)
{
var img = eval((navigator.appName.indexOf(´Netscape´, 0) != -1) ? nsdoc+´.´+name : ´document.all.´+name);
if (name == ´´)
return;
if (img && img.altsrc) {
img.src = img.altsrc;
img.altsrc = null;
}
}
// -->
</script>
</head>
<body>
<a href="index.html" onmouseout="na_restore_img_src(´image1´, ´document´)" onmouseover="na_change_img_src(´image1´, ´document´, ´2.png´, true);"><img vspace="0" hspace="0" alt="Weiter" src="1.png" name="image1" style="border: 0px solid; width: 300px; height: 170px;"></a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
function na_change_img_src(name, nsdoc, rpath, preload)
{
var img = eval((navigator.appName.indexOf(´Netscape´, 0) != -1) ? nsdoc+´.´+name : ´document.all.´+name);
if (name == ´´)
return;
if (img) {
img.altsrc = img.src;
img.src = rpath;
}
}
function na_preload_img()
{
var img_list = na_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i+1];
}
}
function na_restore_img_src(name, nsdoc)
{
var img = eval((navigator.appName.indexOf(´Netscape´, 0) != -1) ? nsdoc+´.´+name : ´document.all.´+name);
if (name == ´´)
return;
if (img && img.altsrc) {
img.src = img.altsrc;
img.altsrc = null;
}
}
// -->
</script>
</head>
<body>
<a href="index.html" onmouseout="na_restore_img_src(´image1´, ´document´)" onmouseover="na_change_img_src(´image1´, ´document´, ´2.png´, true);"><img vspace="0" hspace="0" alt="Weiter" src="1.png" name="image1" style="border: 0px solid; width: 300px; height: 170px;"></a>
</body>
</html>
Antwort 9 von DerWahreDenny
kein kommentar.
:-)
:-)
Antwort 10 von rfb
@web1:
das lässt sich leicht kürzen:
Ich glaub dein Code stammt noch aus der 4er-Browser-Zeit, die Abfragen nach Browsertyp sind mit Einführung des DOM ziemlich überflüssig geworden. Aber auch für die damalige Zeit erscheint es mir recht umständlich programmiert zu sein.
das lässt sich leicht kürzen:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
var bild=new Image();
bild.src="bild2.jpg";
function wechsel(b) {
document.getElementById("image1").src="bild"+b+".jpg";
}
// -->
</script>
</head>
<body>
<a href="index.html" onmouseout="wechsel(1)" onmouseover="wechsel(2)"><img alt="Weiter" src="bild1.jpg" id="image1" style="border:0 none; width:300px; height:170px;"></a>
</body>
</html>Ich glaub dein Code stammt noch aus der 4er-Browser-Zeit, die Abfragen nach Browsertyp sind mit Einführung des DOM ziemlich überflüssig geworden. Aber auch für die damalige Zeit erscheint es mir recht umständlich programmiert zu sein.