Avatar billede hashkagen Nybegynder
05. juli 2006 - 22:26 Der er 1 kommentar og
1 løsning

IMG Swap effekt xhtml

Hej jeg er ved at lave et design, i ImageReady, hvor der ved mouseover på en navigationsmenu skal vises et billede.

I stil med dette: http://www.jysk-rejsebureau.dk/rejseinfo/content.htm

Nu er spørgsmålet så om dette kan lade sig gøre i Imageready, på min menu der allerede har en rollover state, eller om det skal foregå i xhtml koden, gerne ved hjælp af den "changeImages" funktion som ImageReady bruger i den i forevejen genererede kode.
Avatar billede hashkagen Nybegynder
12. juli 2006 - 10:09 #1
Er der ikke i det mindste én som kan forklare hvordan det gøres? Altså lidt teori?

Jeg kan forstå at billederne sættes til preload, men resten kunne jeg godt bruge en forklaring på..
Avatar billede hashkagen Nybegynder
12. juli 2006 - 11:06 #2
okay vi begynder på en frisk... med 200 point.

her er min kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MTG ImageReady</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Preload Script (MTG ImageReady.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        Ferie_over = newImage("images/Ferie-over.png");
        Service_over = newImage("images/Service-over.png");
        Specialrejser_over = newImage("images/Specialrejser-over.png");
        Erhversrejser_over = newImage("images/Erhversrejser-over.png");
        JP_Master_Rejser_over = newImage("images/JP-Master-Rejser-over.png");
        Online_Reservation_over = newImage("images/Online-Reservation-over.png");
        preloadFlag = true;
    }
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
body {
    background-color: #CCCCCC;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
-->
</style></head>
<body onload="preloadImages();">
<!-- ImageReady Slices (MTG ImageReady.psd) -->
<center><table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img id="Logo" src="images/Logo.png" width="800" height="84" alt="" /></td>
    </tr>
    <tr>
        <td>
            <img id="Flag" src="images/Flag.png" width="146" height="24" alt="" /></td>
        <td>
            <img id="H_Nav_del" src="images/H-Nav-del.png" width="124" height="24" alt="" /></td>
        <td>
            <img id="Om_MTG" src="images/Om-MTG.png" width="100" height="24" alt="" /></td>
        <td>
            <img id="Partnere" src="images/Partnere.png" width="96" height="24" alt="" /></td>
        <td>
            <img id="Kontakt" src="images/Kontakt.png" width="93" height="24" alt="" /></td>
        <td>
            <img id="Koncept" src="images/Koncept.png" width="93" height="24" alt="" /></td>
        <td>
            <img id="H_Nav_del008" src="images/H-Nav-del-08.png" width="148" height="24" alt="" /></td>
    </tr>
    <tr>
        <td>
            <img id="V_Nav_del" src="images/V-Nav-del.png" width="146" height="142" alt="" /></td>
        <td colspan="6" rowspan="8">
            <img id="MTG_" src="images/MTG-.png" width="654" height="466" alt="" /></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Ferie', 'images/Ferie-over.png'); return true;"
                onmouseout="changeImages('Ferie', 'images/Ferie.png'); return true;"
                onmousedown="changeImages('Ferie', 'images/Ferie-over.png'); return true;"
                onmouseup="changeImages('Ferie', 'images/Ferie-over.png'); return true;">
                <img name="Ferie" id="Ferie" src="images/Ferie.png" width="146" height="41" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Service', 'images/Service-over.png'); return true;"
                onmouseout="changeImages('Service', 'images/Service.png'); return true;"
                onmousedown="changeImages('Service', 'images/Service-over.png'); return true;"
                onmouseup="changeImages('Service', 'images/Service-over.png'); return true;">
                <img name="Service" id="Service" src="images/Service.png" width="146" height="42" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Specialrejser', 'images/Specialrejser-over.png'); return true;"
                onmouseout="changeImages('Specialrejser', 'images/Specialrejser.png'); return true;"
                onmousedown="changeImages('Specialrejser', 'images/Specialrejser-over.png'); return true;"
                onmouseup="changeImages('Specialrejser', 'images/Specialrejser-over.png'); return true;">
                <img name="Specialrejser" id="Specialrejser" src="images/Specialrejser.png" width="146" height="42" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Erhversrejser', 'images/Erhversrejser-over.png'); return true;"
                onmouseout="changeImages('Erhversrejser', 'images/Erhversrejser.png'); return true;"
                onmousedown="changeImages('Erhversrejser', 'images/Erhversrejser-over.png'); return true;"
                onmouseup="changeImages('Erhversrejser', 'images/Erhversrejser-over.png'); return true;">
                <img name="Erhversrejser" id="Erhversrejser" src="images/Erhversrejser.png" width="146" height="42" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('JP_Master_Rejser', 'images/JP-Master-Rejser-over.png'); return true;"
                onmouseout="changeImages('JP_Master_Rejser', 'images/JP-Master-Rejser.png'); return true;"
                onmousedown="changeImages('JP_Master_Rejser', 'images/JP-Master-Rejser-over.png'); return true;"
                onmouseup="changeImages('JP_Master_Rejser', 'images/JP-Master-Rejser-over.png'); return true;">
                <img name="JP_Master_Rejser" id="JP_Master_Rejser" src="images/JP-Master-Rejser.png" width="146" height="42" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <a href="#"
                onmouseover="changeImages('Online_Reservation', 'images/Online-Reservation-over.png'); return true;"
                onmouseout="changeImages('Online_Reservation', 'images/Online-Reservation.png'); return true;"
                onmousedown="changeImages('Online_Reservation', 'images/Online-Reservation-over.png'); return true;"
                onmouseup="changeImages('Online_Reservation', 'images/Online-Reservation-over.png'); return true;">
                <img name="Online_Reservation" id="Online_Reservation" src="images/Online-Reservation.png" width="146" height="42" border="0" alt="" /></a></td>
    </tr>
    <tr>
        <td>
            <img id="V_Nav_del023" src="images/V-Nav-del-23.png" width="146" height="73" alt="" /></td>
    </tr>
    <tr>
        <td colspan="7">
            <img id="Kontakt_Info" src="images/Kontakt-Info.png" width="800" height="26" alt="" /></td>
    </tr>
</table></center>
<!-- End ImageReady Slices -->
</body>
</html>

Jeg vil gerne have at "images/Ferie.png" på onmouseover skal skifte "images/V-Nav-del.png" til "images/V-Nav-ferie.png" hvorefter den skal vende tilbage til "images/V-Nav-del.png" på onmouseout.

håber det blev lidt mere simpelt.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester