✔ Photoshop Design + Rollover

F

F0obaR

Grünschnabel
Tach. Ich hab eine Homepage in Photoshop designed. Das klappt alles wunderbar. Jetzt wollte ich, dass ein "Butten" durch einen anderen ersetzt wird. Also ein Rollover Effekt sozusagen. Dazu hab ich folgende Code benutzt

<script type="text/javascript">
<!--
standart1 = new Image();
standart1.src = "images/start.jpg";
mouseover1 = new Image();
mouseover1.src = "images/start_2.jpg";
<!--

function change(nummer,object) {
window.document.images[nummer].src = object.src;
}
//-->
</script>
_______________________-

dann in der Zeile wo der Link steht folgendes:

<TD ROWSPAN=2>
<A HREF="start.html" TARGET="content" onMouseOver="change(0,mouseover1)" onMouseOut="change(0,standart1)">
<IMG SRC="images/start.jpg" WIDTH=110 HEIGHT=35 BORDER=0 ALT=""></A></TD>

________________________________

Der Rollover funktioniert auch, allerdings ändert sich nicht der button sondern oben auf der Homepage erscheint der Button (dann in roter Schrift, wie gewollt) viel zu groß. Allerdings soll sich der Button links im Menu ändern. Hab dazu mal ein Bild:

komisch0ka.jpg
 
Hi,

ich nehme an, images[0] ist dann nicht Dein Button, sondern ein anderes Bild, welches oben auf Deiner Seite zu sehen ist (bei einem geslicten Layout ist das sogar sehr wahrscheinlich, da so gut wie alles aus Bildern besteht ...).

Ich würde den Buttons im Menü ids geben, über die Du eine korrekte Referenz erhälst:
HTML: 
<script type="text/javascript">
// Hier Deine image-Deklarationen

function change(obj_id, picture) {
    document.getElementById(obj_id).src = picture.src;
}
</script>
<body>
<a href="#" onmouseover="change('but1', over1)" onmouseout="change('but1', out1)">
    <img id="but1" src="button1.jpg">
</a>

Gruß

P.S.: Noch sinnvoller wäre ggf. der Einsatz von Pseudoklassen für Verweise: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück