Notifikationer

Markér alle som læst Log ud

krk Nybegynder

04. juni 2004 - 11:32 Der er 12 kommentarer og
1 løsning

Fortsat: swop billeder i 2 forskellige celler

Jeg har lige et ekstra spørgsmål til mit tidligere indlæg omkring swop af billeder. Hvis reglen er at jeg skal forsætte i samme indlæg undskylder jeg på forhånd, men jeg havde allerede givet point ... derfor opretter jeg et nyt indlæg.

Mit problem er nu at jeg har fået mine billeder til at swop ved mouse over. Nu vil jeg gerne at når man kommer ind på siden står det første billede (images/gade_stor.jpg) der allerede og når jeg så mouseover på en af de andre små billeder (ex. images/blueline_lille.jpg)skifter det.

Min kode ser ud som følgende:
<table width="387" height="172" border="0" cellpadding="0" cellspacing="0" background="images/webdesign.jpg">
<tr>
<td width="26" height="131" valign="top"></td>
<td width="335" height="131" valign="top"> <p><img src="images/space_holder_stor.gif" width="12" height="12">
<img id="pic1" src="images/gade_stor.jpg" style="display:none">
<img id="pic2" src="images/blueline_stor.jpg" style="display:none">
<img id="pic3" src="images/moccaroma_stor.jpg" style="display:none">
</p></td>
<td width="26" height="98" valign="top"><div align="right"><a href="webdesign.htm"><img src="images/menu_webdesign.jpg" width="26" height="94" border="0"></a></div></td>
</tr>
<tr>
<td height="41" valign="top"> </td>
<td valign="top"><table width="335" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33"><a href="http://kryt.dk/gade" target="_blank"><img src="images/gade_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic1').style.display='block'" onmouseout="document.getElementById('pic1').style.display='none'"></a></td>
<td width="33"><a href="http://kryt.dk/blueline" target="_blank"><img src="images/blueline_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic2').style.display='block'" onmouseout="document.getElementById('pic2').style.display='none'"></a></td>
<td width="33"><a href="http://kryt.dk/MoccAroma" target="_blank"><img src="images/moccaroma_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic3').style.display='block'" onmouseout="document.getElementById('pic3').style.display='none'"></a></td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td> </td>
</tr>
</table></td>
<td> </td>
</tr>
</table>

Synes godt om

skovenborg Nybegynder

04. juni 2004 - 12:44 #1

du kunne starte med at lave en lille funktion til at swoppe (eller swappe som jeg kalder det):
var activeImg;
function swapImages(ID) {
elm = document.getElementById(ID).style;
if (activeImg) {activeImg.display="none";activeImg=null}
elm.display = (elm.display == "block") ? "none" : "block";
}

Herefter kan du på dine links skrive:
<a href="http://kryt.dk/gade" target="_blank"><img src="images/gade_lille.jpg" width="24" height="35" border="0" onmouseover="swapImages('pic1')" onmouseout="swapImages('pic1')"></a>

Nu må du næsten vide hvad det er for et billede der sidst er trykket på, når du trykker på et link, så det letteste ville næsten være at lave denne lille funktion:
function initImg(ID) {
activeImg = document.getElementById(ID).style;
activeImg.display = "block";
}

og skrive:
<body onload="initImg('pic1');">
hvis du fx er inde på http://kryt.dk/gade (og har altså sidst trykket på images/gade_lille

Synes godt om

skovenborg Nybegynder

04. juni 2004 - 12:45 #2

det kan også laves på en anden måde så det virkelig er det billede du sidst har trykket på - noget med cookies for eksempel, men hvis du er tilfreds med denne her form for løsning så synes jeg det ville være det bedste

Synes godt om

krk Nybegynder

04. juni 2004 - 12:51 #3

Nej det kommer ikke rigtig til at virke, for jeg ved ikke hvilket billede der sidst er klikket på.
Jeg havde egentligt forestillet mig at man bare kunne lave det første billede (gade_stor.jpg)synligt, når man kom ind på siden. Og så blev usynlig når musen glider over en af de andre billeder. Men det er måske ikke så simpelt som jeg gerne vil have det til at være ;.)

Synes godt om

skovenborg Nybegynder

04. juni 2004 - 16:01 #4

okay - så må vi gå over til en cookies løsning. Prøv at indsætte ved dine følgende kode:
onclick="document.cookie = 'activeImgID=picID';" fx:
<a href="http://kryt.dk/gade" target="_blank" onclick="document.cookie = 'activeImgID=pic1';">

Og herefter ret funktionerne til:
<script type="text/javascript">
function swapImages(ID) {
elm = document.getElementById(ID).style
if (startBld) {startBld.display="none";startBld=null}
elm.display = (elm.display == "block") ? "none" : "block";
}
var startBld;
function initImg(ID) {
if (document.cookie) {
ID = document.cookie.substr(12);
startBld = document.getElementById(ID).style;
startBld.display = "block";
}
}
window.onload=initImg;
</script>

og så bare slet onload eventen i body-tagget.

Synes godt om

krk Nybegynder

04. juni 2004 - 17:05 #5

Nu har jeg prøvet og gøre som du siger...tror jeg nok.., men det virker stadig ikke rigtig.
Først vil jeg gerne have billede (images/gade_stor.jpg) synligt når man kommer ind på siden, men når brugeren laver mouseover på en af de andre små billeder skal images/gade_stor.jpg erstates af et andet billede. Lige som det gør nu, men jeg vil bare have at det første billede er synligt fra start så siden ikke ser så tom ud.
Du kan prøve og kigge på www.kryt.dk/kasser og så under webdesign.

Jeg sender koden med så giver det måske mere mening det jeg skriver

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<script type="text/javascript">
function swapImages(ID) {
elm = document.getElementById(ID).style
if (startBld) {startBld.display="none";startBld=null}
elm.display = (elm.display == "block") ? "none" : "block";
}
var startBld;
function initImg(ID) {
if (document.cookie) {
ID = document.cookie.substr(12);
startBld = document.getElementById(ID).style;
startBld.display = "block";
}
}
window.onload=initImg;
</script>

<script language="JavaScript" type="text/JavaScript">

</script>


<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scroll.js"></script>

</head>
<body onLoad="InitialiseScrollableArea()" >

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p> </p><table width="680" height="367" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="29" colspan="2"><img src="images/zicon.gif" name="Image2" width="69" height="29" id="Image2"></td>
</tr>
<tr>
<td width="293"> <table width="293" height="219" border="0" cellpadding="0" cellspacing="0" background="images/oeje.jpg">
<tr>
<td width="27"> </td>
<td width="202"> </td>
<td width="64" height="23" valign="top"><a href="index.htm"><img src="images/menu_profil.jpg" width="64" height="23" border="0"></a></td>
</tr>
<tr>
<td> </td>
<td valign="top">
<p> </p>
</td>
<td> </td>
</tr>
</table></td>
<td width="387" valign="top"><table width="387" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td height="172" colspan="3"><table width="387" height="172" border="0" cellpadding="0" cellspacing="0" background="images/webdesign.jpg">
<tr>
<td width="26" height="131" valign="top"></td>
<td width="335" height="131" valign="top"> <p><img src="images/space_holder_stor.gif" width="12" height="12">
<img id="pic1" src="images/gade_stor.jpg" style="display:none">
<img id="pic2" src="images/blueline_stor.jpg" style="display:none">
<img id="pic3" src="images/moccaroma_stor.jpg" style="display:none">
</p></td>
<td width="26" height="98" valign="top"><div align="right"><a href="webdesign.htm"><img src="images/menu_webdesign.jpg" width="26" height="94" border="0"></a></div></td>
</tr>
<tr>
<td height="41" valign="top"> </td>
<td valign="top"><table width="335" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33"><a href="http://kryt.dk/gade" target="_blank" onclick="document.cookie = 'activeImgID=pic1';"><img src="images/gade_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic1').style.display='block'" onmouseout="document.getElementById('pic1').style.display='none'"></a></td>
<td width="33"><a href="http://kryt.dk/blueline" target="_blank"><img src="images/blueline_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic2').style.display='block'" onmouseout="document.getElementById('pic2').style.display='none'"></a></td>
<td width="33"><a href="http://kryt.dk/MoccAroma" target="_blank"><img src="images/moccaroma_lille.jpg" width="24" height="35" border="0" onmouseover="document.getElementById('pic3').style.display='block'" onmouseout="document.getElementById('pic3').style.display='none'"></a></td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td width="33"> </td>
<td> </td>
</tr>
</table></td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="102" valign="top"><a href="grafiskdesign.htm"><img src="images/menu_grafiskdesign.gif" width="102" height="20" border="0"></a></td>
<td width="201"> </td>
<td width="84" height="47" valign="top" background="images/kontakttop.jpg"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="19" colspan="2"><table width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="58" height="119" valign="top"> </td>
<td width="171" valign="top" background="images/referencer.jpg"><table width="171" height="119" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="119" valign="top"><a href="referencer.htm"><img src="images/menu_referencer.jpg" width="25" height="95" border="0"></a></td>
<td width="146" height="119" valign="top"> </td>
</tr>
</table></td>
<td width="182" height="119" valign="top" background="images/grafiskdesign.gif"> </td>
<td width="185" height="119" valign="top" background="images/kontaktside.jpg">
<table width="185" height="119" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td height="17" colspan="4"><img src="images/space_holder.gif" width="1" height="1"></td>
</tr>
<tr>
<td width="46" height="24" valign="top"> </td>
<td width="46" valign="top"> </td>
<td width="46" valign="top"> </td>
<td width="45" valign="top"> </td>
</tr>
<tr valign="top">
<td height="78" colspan="4"> </td>
</tr>
</table></td>
<td width="84" valign="top" background="images/kontaktknap.jpg"><table width="84" height="119" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="34" height="119"> </td>
<td width="19" height="119" valign="bottom"> <a href="#" onClick="window.open('mail.htm ', 'kontakt', 'width=390,height=400,top=100,left=225,status=0,toolbar=0,menubar=0,location=0,resizable=0,scrollbars=1,titlebar=1');" ><img src="images/menu_kontakt.jpg" width="19" height="72" border="0"></a></td>
<td width="31" height="119"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>

Synes godt om

skovenborg Nybegynder

05. juni 2004 - 01:43 #6

skal det altid være det billede eller skal det stadig være det billede man har klikket på sidste gang?

Synes godt om

krk Nybegynder

05. juni 2004 - 09:24 #7

Det skal altid være det billed (images/gade_stor.jpg) der bliver vist først, når man kommer ind på siden.

Synes godt om

skovenborg Nybegynder

05. juni 2004 - 11:40 #8

nåå, og så når man klikker på et af billederne så bliver det stående - jamen, så bliver det da meget lettere (eller bedre for så kan man droppe cookies :-)

Men hvad når man har ført musen henover et billede - skal det billede blive stående når man fører musen ud igen (altså ikke bare over på et andet men helt ud)?

Synes godt om

skovenborg Nybegynder

05. juni 2004 - 11:47 #9

i hvert fald kan du starte med det her:
<script type="text/javascript">
var activeImg;
function swapImages(ID) {
elm = document.getElementById(ID).style
if (activeImg) {activeImg.display="none";}
elm.display = (elm.display == "block") ? "none" : "block";
activeImg = elm;
}
function initImg() {
activeImg = document.getElementById("pic1").style;
activeImg.display = "block";
}
window.onload=initImg;
</script>

og så lav lidt om i din HTML:
<td width="335" height="131" valign="top"> <p><img src="http://kryt.dk/kasser/images/space_holder_stor.gif" width="12" height="12">
<img id="pic1" src="http://kryt.dk/kasser/images/gade_stor.jpg" style="display:block">
<img id="pic2" src="http://kryt.dk/kasser/images/blueline_stor.jpg" style="display:none">
<img id="pic3" src="http://kryt.dk/kasser/images/moccaroma_stor.jpg" style="display:none">
</p></td>

og:
<td width="33"><a href="http://kryt.dk/gade" target="_blank"><img src="http://kryt.dk/kasser/images/gade_lille.jpg" width="24" height="35" border="0" onmouseover="swapImages('pic1')" onmouseout="swapImages('pic1')"></a></td>
<td width="33"><a href="http://kryt.dk/blueline" target="_blank" onclick=""><img src="http://kryt.dk/kasser/images/blueline_lille.jpg" width="24" height="35" border="0" onmouseover="swapImages('pic2')" onmouseout="swapImages('pic2')"></a></td>
<td width="33"><a href="http://kryt.dk/MoccAroma" target="_blank"><img src="http://kryt.dk/kasser/images/moccaroma_lille.jpg" width="24" height="35" border="0" onmouseover="swapImages('pic3')" onmouseout="swapImages('pic3')"></a></td>

Synes godt om

krk Nybegynder

06. juni 2004 - 19:49 #10

Det virker...bare ikke helt som jeg havde tænkt, men meget bedre. Så jeg er super tilfreds.
*skovenborg send et svar

Synes godt om

skovenborg Nybegynder

06. juni 2004 - 19:52 #11

okay - men hvad mangler der lige nu, måske kan det rettes ;-)

Synes godt om

krk Nybegynder

06. juni 2004 - 20:31 #12

Det var bare ved mouseout at jeg havde forestillet mig at billede skulle forsvinde igen. Men grafisk ser det bedre ud at billede bliver stående.
Ellers bruger jeg jo bare det gamle kode ved mouseout.
Så tak for hjælpen

Synes godt om

skovenborg Nybegynder

06. juni 2004 - 20:55 #13

en lettere måde er bare at skrive:
function swapImages(ID) {
elm = document.getElementById(ID).style
if (activeImg) {activeImg.display="none";activeImg=null}
elm.display = (elm.display == "block") ? "none" : "block";
}

men jeg valgte med vilje ikke at gøre det, da det måske virker lidt ulogisk at der skal vises et billede når man går ind på siden, for at det ikke ser tomt ud, men at når man først kører musen over billederne, må de gerne forsvinde og efterlade en tom plads. Men du bestemmer - måske har jeg heller ikke ret i den påstand ;-)

Men tak for points i hvert fald :-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS