CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

mr_y Nybegynder

16. juni 2007 - 12:26 Der er 9 kommentarer og
2 løsninger

mouseover picture

Hej eksperter

Jeg har en side med produkter. Hvor hvert produkt har et billed og en tekst.

Jeg har forsøg mig med mouseover and mouse out men det virker fint på billed 1 men der er jo mange produkter.

Helt simpelt
Hvordan laver jeg en mouseeover på de andre billeder
vær sød at give mig alt teksten.

jeg bruger en tabel til at holde billed og tekst adskildt

Tabellen ser således ud
<table width="400" border="1">
<tr>
<td width="100" height="162"><img src="img/Produkter/Eikendal/small/cabsau02.jpg" width="100" height="142" /></td>
<td width="424">Vin beskrivelse 1 </td>
</tr>
<tr>
<td height="146"><img src="img/Produkter/Eikendal/small/brut.jpg" width="100" height="142" /></td>
<td>Vinbeskrivelse 2 </td>
</tr>
<tr>
<td>Billed 3 </td>
<td>Vinbeskrivelse 3 </td>
</tr>
<tr>
<td>Billed 4 </td>
<td>Vinbeskrivelse 4 </td>
</tr>
<tr>
<td>osv</td>
<td>osv</td>
</tr>
<tr>
<td>osv</td>
<td>osv</td>
</tr>
</table>

er der en smartere måde at lave det på og mere simpel ?
kom med forslag "venligst med koden :)

Synes godt om

ziron Nybegynder

16. juni 2007 - 12:52 #1

en måde er at lave det i javascript : prøv google det meget smart :)
http://www.webdevelopersnotes.com/tips/html/changing_two_images_on_mouse_over_using_javascript.php3

Synes godt om

ziron Nybegynder

16. juni 2007 - 12:56 #2

Ellers kan denne guide også hjælpe: http://www.webmonkey.com/webmonkey/98/23/index3a_page2.html?tw=design

Synes godt om

guffey Nybegynder

16. juni 2007 - 14:02 #3

altså skla alle billederne skifte når man har musen over billede 1 ?
Eller er det kun det billede som man har musen hen over som skal skifter ?

Synes godt om

mr_y Nybegynder

16. juni 2007 - 17:10 #4

det er kun billed 1

Synes godt om

roenving Novice

17. juni 2007 - 02:40 #5

Hvad er det, der skal skiftes ?-)

-- er det teksten, der hører til billedet, er det selve billedet, eller er det f.eks. et stort billede, der skal vises (f.eks. med teksten til ?-)

Synes godt om

mr_y Nybegynder

17. juni 2007 - 09:25 #6

Ok her kommer en mere fyldens gørende beskrivelse.

Kør musen over Teksten her for at se en beskrivelse og et billed.

det vil sige at når man kører musen over et link så kommer der i en box 1 et billed og i Box 2 en beskrivelse.

Nå man så flytter musen over link 2 så forsvinder indholdet af box 1 og 2 , det bliver nu udskiftet af et nyt billed i box 1 og en ny tekst i box 2.

Tænkte det skulle se sådanne ud.

LINK1 : LINK2 : LINK3: LINK4:

BOX 1 BOX 2

Side SLUT

Håber det er lidt mere fyldes gørende.
MR_y

Synes godt om

ziron Nybegynder

17. juni 2007 - 11:55 #7

Så kunne det evt se sådan her ud:

<html>
<head>
<title>Udskiftning af billeder - Over links</title>

<SCRIPT LANGUAGE="JAVASCRIPT">

</SCRIPT>
</head>
<body>
<div align="center">
<table width="400" border="1">
<tr>
<td width="100" height="50">
<A href=""
onmouseover="roll('image_1', 'vin1.png', 'image_2', 'b1.png')"
onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
Link 1
</A>
</td>
<td width="100" height="50">
<A href=""
onmouseover="roll('image_1', 'vin2.png', 'image_2', 'b2.png')"
onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
Link 2
</A>
</td>
<td width="100" height="50">
<A href=""
onmouseover="roll('image_1', 'vin3.png', 'image_2', 'b3.png')"
onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
Link 3
</A>
</td>
<td width="100" height="50">
<A href=""
onmouseover="roll('image_1', 'vin4.png', 'image_2', 'b4.png')"
onmouseout="roll('image_1', 'tom.png', 'image_2', 'tom.png')">
Link 4
</A>
</td>
</tr>
<tr>
<td height="200" width="200" colspan="2">
<img src="tom.png" name="image_1" border="0">
</td>
<td height="200" width="200" colspan="2">
<img src="tom.png" name="image_2" border="0">
</td>
</tr>
</table>
</div>
</body>
</html>

se det her : http://www.com8.dk/eksperten.dk/udskiftningafbilleder/udskiftning%20af%20billeder%20-%20over%20links.html

Mark

Synes godt om

roenving Novice

18. juni 2007 - 00:15 #8

Og sådan kan du være sikker på, at den i hvert fald virker nogle år:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Vis billede og tekst</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{width:864px;margin:0 auto;}
#site ul,#site li{display:inline;}
#site li img{width:53px;height:37px;}
#site td{font-size:22px;font-weight:bold;}
</style>
<script language="javascript" type="text/javascript">
function showDesc(elm){
document.getElementById("visBillede").firstChild.setAttribute("src", elm.getAttribute("src").replace(/\.gif/i,".jpg"));
document.getElementById("visBeskrivelse").firstChild.nodeValue = elm.getAttribute("alt");
}
</script>
</head>
<body>
<div id="site">
<ul>
<li><img src="vin1.gif" alt="Denne vin fra Alsace giver rigtige gode fornemmelser, server den kølig til f.eks. en skinke-menu" title="vin1, Alsace" onmouseover="showDesc(this);"></li>
<li><img src="vin2.gif" alt="En rigtig god Bordeaux, som altid giver gode minder til et godt måltid" title="vin2, Bordeaux" onmouseover="showDesc(this);"></li>
<li><img src="vin3.gif" alt="Skal du prøve noget eksotisk er denne australske vin et godt bekendtskab ifølge med en god bøf" title="vin3, Australien" onmouseover="showDesc(this);"></li>
</ul>
<table>
<tr>
<td id="visBillede"><img src="etBilledeFraEnVinmark.jpg" style="width:350px;height:288px;"></td>
<td id="visBeskrivelse"> </td>
</tr>
</table>
</div>
</body>

</html>

Synes godt om

mr_y Nybegynder

18. juni 2007 - 14:14 #9

roenving kom med et svar og jeg deler point mellem jer to.

Takker for de fine forslag, Så nu skal jeg bare igang med at sætte det ind på min side.

Synes godt om

roenving Novice

18. juni 2007 - 14:36 #10

Velbekomme '-)

Synes godt om

roenving Novice

19. juni 2007 - 22:19 #11

-- og jeg takker for point ;~}

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
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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