Seite 1 von 2
Javascript Mouseover Effekt
Verfasst: 29.12.2004 21:30
von RPS
Also ich habe folgendes, eigendlich einfaches Problem:
Nehmen wir mal an, ich habe einen jpg Banner auf der Seite, und möchte, dass ein anderer Banner angezeigt wird, wenn man mit der Maus darauf ist?
Vielen Danks schonmal!
Verfasst: 29.12.2004 21:35
von Andy120
Ich denke du suchst sowas...
Füge das folgende Script in den body-Bereich deiner HTML-Datei ein:
<SCRIPT LANGUAGE="JavaScript">
<!-- ... Quelle Dummy ...
function show_image()
{
alert("Diese Funktion benötigt JavaScript1.1!")
}
// ... Ende Dummy ... -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!-- ... Quelle Beispiel ...
// Vorabladen der Bilder
NumberImg = new Array()
for(var i = 0; i < 4; i++)
{
NumberImg = new Image()
NumberImg.src = "" + i + ".gif"
}
// Bild zeigen
function show_image(idx)
{
document.showimg.src = NumberImg[idx].src
}
// Bild zeigen
function hide_image()
{
document.showimg.src = NumberImg[0].src
}
// Dummy
function dummy()
{
alert("Hier wird keine Funktion ausgelöst. " +
"Die Wirkung des Beispiels ist allein durch das Betreten und Verlassen des Mauszeigers im Bereich des Verweises zu erkennen.")
}
// -->
</SCRIPT>
Um die entsprechenden Links und das Bild zu erzeugen musst du außerdem noch diesen Quelltext einfügen:
(Hier in Form einer Tabelle)
<TABLE BORDER=2 CELLPADDING=8 align="left" bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF" style="border-collapse: collapse" bordercolor="#111111" cellspacing="0">
<TR ALIGN=CENTER><TD COLSPAN=3><IMG NAME="showimg" SRC="0.gif" HEIGHT=64 WIDTH=64></TD></TR>
<TR><TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(1)" onMouseOut="hide_image()">Eins</A></BIG></TD>
<TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(2)" onMouseOut="hide_image()">Zwei</A></BIG></TD>
<TD ALIGN=center WIDTH=96><BIG><A HREF="javascript:dummy()" onMouseOver="show_image(3)" onMouseOut="hide_image()">Drei</A></BIG></TD></TR>
</TABLE>
Und so siehts aus...
http://www.ekiwi.de/kiwi/kiwi/jscriptht ... rafik6.php
Gruss, Andy
Verfasst: 29.12.2004 23:29
von RPS
thx, denke das ist das was ich suche. Aber ich verstehe das nicht so ganz. Kannst du vielleicht ein Beispiel machen, wie ich das bei einem Bild angeben müsste? thx!
Verfasst: 29.12.2004 23:34
von Pyramide
Verfasst: 30.12.2004 21:25
von RPS
thx, jetzt hab ichs kapiert!
Verfasst: 09.03.2005 02:47
von Eves21
Hallo
<table width="85%" cellpadding="4" cellspacing="1" border="0" class="forumline" align="center" >
<tr>
<th height="25" colspan="8" class="thHead" nowrap="nowrap">HABER EVI</th>
</tr>
<tr>
<tr>
<!-- BEGIN show -->
<td class="row2" width="20%" align="center">
<span class="gensmall">{show.IMAGE}<br>{show.TITRE}<br>{show.U_INFO}</span></td>
<!-- END show -->
</tr>
</table>
so sieht meine tpl. datei aus,bei dem ich diesen Javascript Mouseover Effekt einbauen möchte..
Die Bilder + text bearbeite ich über mein AP..(habe den:show_image Mod)
Deshalb wüsste ich nicht wie es einbauen sollte/könnte
Kann mir jemand bitte helfen?
Danke
Verfasst: 10.03.2005 18:52
von Eves21
Kann das wirklich niemand?? Oder ein Tipp?
Danke
Verfasst: 11.03.2005 00:32
von Pyramide
Dazu müsstest du den Mod anpassen, um das zweite Bild zu speichern
Verfasst: 11.03.2005 12:51
von Eves21
Hallo
ich habe diesen Mod als Beispiel gegeben weil ich auch noch viele ähnliche Mod habe bei denen ich ähnliche Mousover scripts einbauen möchte..
Nur jetzt bei dem Beispiel? Könntest du das erläutern? Wie mache ich das?
Danke
Verfasst: 11.03.2005 12:58
von Pyramide
- Datenbankfeld für das zweite Bild einfügen
- Die Anlegen/Bearbeiten/Löschen Formulare anpassen
- Die Anzeigen-Seite anpassen
- und natürlich die Template-Dateien anpassen