nicht angemeldet
rollover link! (Bild verändern) für alle browser?
hi leute,
stehe sachen die net auf allen browsern laufen eigentlich eher skeptisch gegenüber! aber ich hab was entwickelt wozu ich umbedingt nen rollover link brauche bei dem sich ein bild verändert! naja ich glaube das ganze kann man mit javascript und ich meine auch css machen weiß aber net genau! naja habe sofort google angeschmissen und wirklich hunderte möglichkeiten gefunden, ganz gut sah diese aus:
function rollover()
{
document.bild.src = "nachher.gif";
}
function rollout()
{
document.bild.src = "vorher.gif";
}
<a href="#" onmouseover="rollover();" onmouseout="rollout();">
<img src="vorher.gif" name="bild" width="100" height="40"
alt="Rollover-Bild" border="0" /></a>
naja nur leider läuft das ganze auf opera und mozilla net! netscape ie und mozilla-firefox gehen!
kennt einer von euch eine art solche links zu erstellen die auf allen browsern laufen? wenn ja wo finde ich eine solche?
mfg dani
-
1. Versehe das Bild mit einer ID und greife mit document.getElementById() darauf zurück.
2. Du solltest dir im klaren sein, dass man keine Homepage für alle Browser machen kann. Jeder Browser stellt die Seiten anders dar, wobei der IE besonders durch seine kreativität heraussticht... ;-)
-
hi,
- Versehe das Bild mit einer ID und greife mit document.getElementById() darauf zurück.
eine möglichkeit, eine andere: http://de.selfhtml.org/javascript/beispiele/buttons.htm
gruß,
wahsaga--
Rest in peace, Dimebag!
#
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
hmm die methode ist gut aber irgendwie geht das net in meinem quelltext!! :-/ wird da auch immer das erste bild angesteuert? also es ist nicht das erste bild auf der hp was angesteuert werden soll, aber so funzt es nit:
<script language=javascript>
<!--
Normal1 = new Image();
Normal1.src = "grafiken/lupe.gif";
Highlight1 = new Image();
Highlight1.src = "grafiken/lupe2.gif";function Bildwechsel(Bildnr,Bildobjekt)
{ window.document.images[Bildnr].src = Bildobjekt.src; }
//-->
</script><a onclick="toggle('werbung'); toggle('bildersuche'); return false;" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)" href="#"><img src="grafiken/lupe.gif" width="60" height="50" alt="Bildersuche" border="0"></a>
:-/
-
hi,
hmm die methode ist gut aber irgendwie geht das net in meinem quelltext!! :-/ wird da auch immer das erste bild angesteuert? also es ist nicht das erste bild auf der hp was angesteuert werden soll
dann würde ich vorschlagen, du liest dir erklärung auch mal, anstatt nur den quelltext zu kopieren.
gruß,
wahsaga--
Rest in peace, Dimebag!
#
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."-
<html>
<head>
<title>Rollover mit mehreren Bildern</title>
<script language="javascript" type="text/javascript">
function swapPictures(id, status)
{
var rollover = new Array();rollover[0] = new Array();
rollover[0].standartURL = "rot.gif";
rollover[0].rolloverURL = "gelb.gif";
rollover[0].pictureID = "p1";
rollover[0].chgID = new Array();
rollover[0].chgID[0] = 2;rollover[1] = new Array();
rollover[1].standartURL = "blau.gif";
rollover[1].rolloverURL = "gruen.gif";
rollover[1].pictureID = "p2";
rollover[1].chgID = new Array();
rollover[1].chgID[0] = 1;rollover[2] = new Array();
rollover[2].standartURL = "gelb.gif";
rollover[2].rolloverURL = "blau.gif";
rollover[2].pictureID = "p3";
rollover[2].chgID = new Array();
rollover[2].chgID[0] = 1;rollover[3] = new Array();
rollover[3].standartURL = "gruen.gif";
rollover[3].rolloverURL = "rot.gif";
rollover[3].pictureID = "p4";
rollover[3].chgID = new Array();
rollover[3].chgID[0] = 2;
rollover[3].chgID[1] = 1;rollover[4] = new Array();
rollover[4].standartURL = "trigger.gif";
rollover[4].rolloverURL = "trigger_over.gif";
rollover[4].pictureID = "p5";
rollover[4].chgID = new Array();
rollover[4].chgID[0] = 1;rollover[5] = new Array();
rollover[5].standartURL = "trigger.gif";
rollover[5].rolloverURL = "trigger_over.gif";
rollover[5].pictureID = "p6";
rollover[5].chgID = new Array();
rollover[5].chgID[0] = 2;for (var pictureIndex in rollover)
{
for(var idIndex in rollover[pictureIndex].chgID)
{
doRollover = (rollover[pictureIndex].chgID[idIndex] == id)
if(doRollover)
{
break;
}
}
if(doRollover&&status=="over")
{
var picIndex = rollover[pictureIndex].pictureID;
document.images[picIndex].src = rollover[pictureIndex].rolloverURL;
}
else if(doRollover&&status=="out")
{
var picIndex = rollover[pictureIndex].pictureID;
document.images[picIndex].src = rollover[pictureIndex].standartURL;
}
doRollover = false;
}}
</script>
</head>
<body>
<table>
<tr>
<td><img id="p1" src="rot.gif"></img></td>
<td><img id="p2" src="blau.gif"></img></td>
<td><img id="p3" src="gelb.gif"></img></td>
<td><img id="p4" src="gruen.gif"></img></td>
</tr>
<tr>
<td colspan="2">
<p>Swap 1:<img id="p5" src="trigger.gif" onMouseOver="swapPictures(1, 'over')" onMouseOut="swapPictures(1, 'out')"></p>
</td>
<td colspan="2">
<p>Swap 2:<img id="p6" src="trigger.gif" onMouseOver="swapPictures(2, 'over')" onMouseOut="swapPictures(2, 'out')"></p>
</td>
</tr>
</table>
</body>
</html>so gehts! :-)
-
-
-
-
Hi,
document.bild.src = "vorher.gif";
die Referenz ist voellig in Ordnung
naja nur leider läuft das ganze auf opera und mozilla net! netscape ie und mozilla-firefox gehen!
Kann ich so nicht nachvollziehen. Mozilla am Mac (und Safari) machen es einwandfrei, Opera hab ich grade nicht, wuesste aber nicht, was ihn stoeren sollte.
Btw: ich wuerde die Tauschbilder vorladen.Gruesse, Joachim
--
Am Ende wird alles gut.-
sehe ich gerade auch habe die externe *.js datei net geladen!
-