PDA

Volledige versie bekijken : Meerdere rollover-images

Love Witch
%Europe/Berlin %623 %2006, 14:57
Hey

Nu was ik van plan een html-pagina te maken met roll-over images. Een link naar wat ik al heb:
http://dhost.info/shakaku/sweetestsin/sins.html

Als je met de muis over een vlinder komt, verschijnt er in het midden een prentje. Maar nu wou ik telkens een ander prentje naargelang de vlinder die je kiest. Daarvoor had ik een code gevonden in javascript (mijn code hieronder, website originiele code (http://javascript.internet.com/miscellaneous/set-image.html) ), maar aangezien ik er wa animatie en zo wou inbrengen, werden mn prentjes (animated gifs) nogal groot. Ik dacht de grootte een beetje te doen verminderen door ze te vervangen door flash filmpjes. Maar ik heb geen idee, hoe ik dat dan in de code moet zetten?

Gaan er trouwens duidelijke verschillen zijn tss de gif-afbeeldingen en de swf, maw zal je de overgang op uw browser zien van gif nr swf en omgekeerd? Want nu is het vrij mooi overlopend...

Ik weet dat je ongeveer hetzelfde kunt doen door geheel in flash te werken, maar ik zou graag in html blijven werken!

Ik hoop dat jullie mij kunnen helpen. Thanks!

De code:

<html>
<HEAD>
<link rel="stylesheet" type="text/css" href="style.css">
<title>... My Sweetest Sin ... </title>
<SCRIPT LANGUAGE="JavaScript">

var superbia = new Image();
var avaritia = new Image();
var luxuria = new Image();
var invidia = new Image();
var gula = new Image();
var ira = new Image();
var acedia = new Image();
var tv = new Image();


superbia.src = "images/superbia2.gif";
avaritia.src = "images/avaritia2.gif";
luxuria.src = "images/luxuria2.gif";
invidia.src = "images/invidia2.gif";
gula.src = "images/gula2.gif";
ira.src = "images/ira2.gif";
acedia.src = "images/acedia2.gif";
tv.src = "images/tv.gif";

function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
}

</script>
</HEAD>

<TABLE WIDTH="100%" HEIGHT="100%" ALIGN="CENTER">


<TR>


<TD WIDTH="100%" HEIGHT="100%" VALIGN="MIDDLE" ALIGN="CENTER">

<TABLE WIDTH=601 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center" frame="void" valign="center">
<TR>
<TD align=center>



<body bgcolor="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="601" height="450" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td rowspan="5">
<img src="images/sins_01.gif" width="16" height="192" alt=""></td>
<td colspan="2" rowspan="2">
<a href="superbia.htm" target="superbia.htm" onmouseover = "doButtons('superbia')" onmouseout = "doButtons('tv')">
<img onmouseover="window.status='Superbia'; return true;"
onmouseout="window.status=''; return true;" src="images/Superbia.gif" width="104" height="91" border="0" alt="Superbia"></a></td>
<td colspan="5">
<img src="images/sins_03.gif" width="330" height="76" alt=""></td>
<td colspan="2" rowspan="3">
<a href="acedia.htm" target="acedia.htm"
onmouseover="window.status='Acedia'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Acedia.gif" width="102" height="104" border="0" alt="Acedia" onmouseover = "doButtons('acedia')" onmouseout = "doButtons('tv')"></a></td>
<td colspan="3" rowspan="4">
<img src="images/sins_05.gif" width="48" height="128" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="76" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="7">
<img src="images/sins_06.gif" width="31" height="244" alt=""></td>
<td colspan="3" rowspan="9">
<img name=picture src="images/tv.gif" width="299" height="299" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/sins_08.gif" width="104" height="101" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/sins_09.gif" width="102" height="24" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/sins_10.gif" width="57" height="216" alt=""></td>
<td colspan="3" rowspan="2">
<a href="ira.htm" target="ira.htm"
onmouseover="window.status='Ira'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Ira.gif" width="66" height="112" border="0" alt="Ira" onmouseover = "doButtons('ira')" onmouseout = "doButtons('tv')"></a></td>
<td rowspan="8">
<img src="images/sins_12.gif" width="27" height="321" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<a href="avaritia.htm" target="avaritia.htm"
onmouseover="window.status='Avaritia'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Avaritia.gif" width="120" height="92" border="0" alt="Avaritia" onmouseover = "doButtons('avaritia')" onmouseout = "doButtons('tv')"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<img src="images/sins_14.gif" width="66" height="104" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/sins_15.gif" width="120" height="36" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="36" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/sins_16.gif" width="20" height="129" alt=""></td>
<td colspan="2" rowspan="3">
<a href="luxuria.htm" target="luxuria.htm"
onmouseover="window.status='Luxuria'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Luxuria.gif" width="104" height="104" border="0" alt="Luxuria" onmouseover = "doButtons('luxuria')" onmouseout = "doButtons('tv')"></a></td>
<td rowspan="4">
<img src="images/sins_18.gif" width="27" height="129" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="3">
<a href="gula.htm" target="gula.htm"
onmouseover="window.status='Gula'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Gula.gif" width="109" height="105" border="0" alt="Gula" onmouseover = "doButtons('gula')" onmouseout = "doButtons('tv')"></a></td>
<td rowspan="3">
<img src="images/sins_20.gif" width="14" height="105" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/sins_21.gif" width="95" height="74" alt=""></td>
<td rowspan="2">
<a href="invidia.htm" target="invidia.htm"
onmouseover="window.status='Invidia'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Invidia.gif" width="94" height="74" border="0" alt="Invidia" onmouseover = "doButtons('invidia')" onmouseout = "doButtons('tv')"></a></td>
<td rowspan="2">
<img src="images/sins_23.gif" width="110" height="74" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/sins_24.gif" width="104" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="94" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="110" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td></td>
</tr>
<tr><td colspan="12">
<center>This is a project for Kunstbende 2007 by Love Witch.</center>

</td></tr>
</table>
</td></tr>
</table>

</body>
</html>
Janbotchbingo
%Europe/Berlin %639 %2006, 15:20
Dit gedeelte staat voor de middelste afbeeldingen:

superbia.src = "images/superbia2.gif";
avaritia.src = "images/avaritia2.gif";
luxuria.src = "images/luxuria2.gif";
invidia.src = "images/invidia2.gif";
gula.src = "images/gula2.gif";
ira.src = "images/ira2.gif";
acedia.src = "images/acedia2.gif";
tv.src = "images/tv.gif";

Dus als je op de gula vlinder komt, krijg je dat middelste zijn door deze code.

http://dhost.info/shakaku/sweetestsin/images/DEAFBEELDING

Bijvoorbeeld:
http://dhost.info/shakaku/sweetestsin/images/gula2.gif

Nu zie je dus die afbeelding. Die moet je bewerken in flash ;) En dezelfde naam geven, en natuurlijk dezelfde lengtes. Dus gula2.gif word nu gula2.swf Dantverander je nog ook in de javascirpt, dus dit:

superbia.src = "images/superbia2.swf";
avaritia.src = "images/avaritia2.swf";
luxuria.src = "images/luxuria2.swf";
invidia.src = "images/invidia2.swf";
gula.src = "images/gula2.swf";
ira.src = "images/ira2.swf";
acedia.src = "images/acedia2.swf";
tv.src = "images/tv.swf";

Ik neem aan dit dit gaat werken ;)

Edit: Je kan niet op de links klikken! Je moet ze kopieren en plakken in je adressenbalk anders krijg je een error ;)
Love Witch
%Europe/Berlin %642 %2006, 15:25
Nop, als ik dat verander krijg ik dit:
http://dhost.info/shakaku/sweetestsin/sins2.html
(Ik heb het alleen voor acedia gedaan)
Janbotchbingo
%Europe/Berlin %653 %2006, 15:41
Ik denk dat je ook dit moet wijzigen:

new Image();

En dan wijzigen in:

new SWFObject();

Als dat nog niet lukt, zou ik het ook niet meer weten :(
Love Witch
%Europe/Berlin %660 %2006, 15:51
Ik denk dat je ook dit moet wijzigen:

new Image();

En dan wijzigen in:

new SWFObject();

Als dat nog niet lukt, zou ik het ook niet meer weten :(
Nee, dat doet hem ook niet echt:
http://dhost.info/shakaku/sweetestsin/sins3.html

Toch bedankt!