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

haabert Nybegynder

26. november 2005 - 21:53 Der er 4 kommentarer

mouseover effekt

Jeg skal lave et menu-bar, som består af en række mindre billeder. Når musen føres over et af billeder skal der poppe en tekst (billedefil) op et andet sted på skærmen.

Når musen ikke peger på et af menu-billerne, skal der bare være tomt i det felt, hvor billederne popper frem.

Kan I hjælpe, eksikverer jeg med nogle points.

/Mads

Synes godt om

haabert Nybegynder

26. november 2005 - 21:57 #1

Problem løst! Eksikverer staves vist også med e i stedet for i. God jul.

Synes godt om

johan.o Nybegynder

26. november 2005 - 23:17 #2

Nå okay :), men nu har jeg jo lavet det så kan du jo lige så godt se om du kan bruge noget af det :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

td { vertical-align: top; border: 1px solid red; }

</style>
<script type="text/javascript">

function showPic(oEvent) {
eObject=oEvent.target?oEvent.target:oEvent.srcElement;
if(eObject.tagName=="IMG") {
oPic=new Image();
oPic.src=eObject.src;
ratio=oPic.height/oPic.width;
if(oPic.width>oPic.height) { oPic.width=200; oPic.height=200*ratio; }
else { oPic.height=200; oPic.width=200/ratio; }
document.getElementById("picView").src=oPic.src;
document.getElementById("picView").height=oPic.height;
document.getElementById("picView").width=oPic.width;
document.getElementById("picView").style.display="block"; } }

</script>
</head>

<body>

<table style="width: 800px; margin: 0px auto;"><tr>
<td colspan="3" onmouseover="showPic(event);" onmouseout="document.getElementById('picView').style.display='none';">
<img src="pic1.jpg" style="height: 100px;" alt="">
<img src="pic2.jpg" style="height: 100px;" alt="">
</td>
</tr><tr>
<td style="width: 150px;"><p>Evt. en menu !</p></td>
<td><p>En masse indhold !</p></td>
<td style="width: 200px;">
<div style="width: 200px; height: 200px; border: 1px solid green;">
<img id="picView" src="" style="display: none;" alt="">
</div>
</td></tr></table>

</body>
</html>

Mvh. Johan

Synes godt om

haabert Nybegynder

27. november 2005 - 12:07 #3

Godt du svarede! Det ligner lidt a la det, jeg skal bruge. Og det jeg fandt ud af i går virker ikke, så... :-)

Men når jeg sætter en af mine egne billedfiler ind i koden, hvor der står pic1.jpg, er det bare det billede, som bliver vist i det andet område.

Det skulle gerne være sådan, at når musen føres over et af billederne i menu-baren, så hentes en anden billedfil med noget tekst, som så vises det nye sted på skærmen.

Er det helt volapyk?? Hehe, men jeg håber du kan hjælpe!

/Mads

Synes godt om

johan.o Nybegynder

27. november 2005 - 12:38 #4

volapyk ?... mnah :)

Først ! --> Vil du vise det samme billede som musen 'kører' over, eller et andet ?

Dernæst ! --> Hvad er det for noget tekst ? Hvor skal det stå ? Er det forskellig tekst fra billed til billed ? Skriv et ekspempel !

Mvh. Johan

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