Notifikationer

Markér alle som læst Log ud

mikkel_strack Nybegynder

15. august 2003 - 00:17 Der er 14 kommentarer og
1 løsning

onMouseOver billede + celledata

Hejsa..
Jeg forsøger at lave et galleri hvor når man kører musen over et lille billede, får et større op inkl. noget tekst fra en celle.
Både billedet og tekst skal hentes fra en database (med ASP).
Har ikke noget problem med billedet, men er i tvivl om, om det overhovedt kan lade sig gøre med teksten i cellen.

Kan det det??..og hvis nogen kan hjælpe mig lidt på vej med noget kode der kunne minde om ville det være dejligt :o)

Mvh Mikkel Strack

Synes godt om

roenving Novice

15. august 2003 - 00:20 #1

Hvis du kigger lidt på den jeg viser i

http://roenving.users.whitehat.dk/WD1ResizeTilBillede.html

kan vi sikkert udbygge den til også at tage en tekst med ...

Synes godt om

roenving Novice

15. august 2003 - 00:51 #2

At den er bygget til onclick kan sagtens laves om, men ved nærmere eftertanke tro jeg det er Overlib du har brug for:

http://www.bosrup.com/web/overlib/

Synes godt om

mikkel_strack Nybegynder

15. august 2003 - 00:51 #3

Ikke lige det jeg mente...
Ingen klik og ingen popups...

Skal være en række små billeder i toppen. Ved onMouseOver kommer det samme billede midt på siden med en undertekst.
Og altså...billeder og tekst fra en database.

Mvh Mikkel Strack

Synes godt om

mikkel_strack Nybegynder

15. august 2003 - 00:53 #4

Var svar til dit første :o)
Kigger på nr. 2

Mikkel

Synes godt om

roenving Novice

15. august 2003 - 01:03 #5

Eriks kan, som du måske når at opdage konfigureres næsten uendeligt, bl.a. til at vise html (og deriblandt et image m.m.) og til at være fikseret på et bestemt sted ...

Hvis det du har brug for, er at du f.eks. foroven har en stribe billeder og på et iøvrigt tomt område af siden skal have vist dine billeder, kan det selvfølgelig laves en del simplere, men så skal det laves !-)

Overlib findes allerede !o]

Synes godt om

mikkel_strack Nybegynder

15. august 2003 - 02:14 #6

Ved du eller andre om man kan ha to popups til et link???

Synes godt om

roenving Novice

15. august 2003 - 02:16 #7

Hvorfor ikke ?-)

Synes godt om

roenving Novice

15. august 2003 - 02:21 #8

Jeg glemmer sent første gang jeg kiggede på vores lokale filmselskabs hjemmeside, så poppede 24 billeder op -- siden har jeg ikke været på besøg hos zentropa !-)

Synes godt om

mikkel_strack Nybegynder

16. august 2003 - 06:26 #9

Jeg mente iøvrigt ikke popups - men det jeg tidligere forklarede.
Har sat point op til 200 nu...er træt af det :o/

Det jeg leder efter er
som jeg forsøger at illustrere her

.....................................
.
. .....
. . .
. . .
. .....
.
.
.
.
. ..........
. . .
. . .
. . .
. . .
. . .
. ..........
. tekst____
.
.
.....................................

Når man fører musen over et af de små billeder i toppen ser man det som stort forneden inkl. noget tekst. Det store billede + tekst skal være fikseret på siden.

Noget der minder om en kombination af disse to:

<html>
<head>

<script type="text/javascript">
img2=new Image()
img2.src="landscape3.gif"

function changeImage()
{
document.images.myImage.src=img2.src
}
</script>

</head>
<body>

<p>
When you mouse over the image, a new image will appear.
</p>

<img id="myImage" onmouseover="changeImage()" border="0" width="160" height="120" src="landscape2.jpg">

<p>
The new image appears instantly, because your browser has already loaded the image.
</p>

</body>
</html>
___________________________________

html>
<head>

<script type="text/javascript">
function gettip(txt)
{
tip.innerHTML=txt
}

function reset()
{
tip.innerHTML=""
}
</script>

</head>
<body>

<p>Mouse over these drinks:</p>

<span onmouseover="gettip('Hot black drink')"
onmouseout="reset()">Coffee</span>

<span onmouseover="gettip('Cold white drink')"
onmouseout="reset()">Milk</span>

<p id="tip"></p>

</body>
</html>

Synes godt om

roenving Novice

16. august 2003 - 10:13 #10

Du kan næsten 'bare' sætte dem sammen:

<html>
<head>

<script type="text/javascript">
img2=new Image()
img2.src="landscape3.gif"

function changeImage()
{
document.getElementById('visBillede').style.visibility=(document.getElementById('visBillede').style.visibility=='hidden')?'visible':'hidden';
}
</script>

</head>
<body>

<p>
When you mouse over the image, a new image will appear.
</p>

<img id="myImage" onmouseover="changeImage()" onmouseout="changeImage()" border="0" width="160" height="120" src="landscape2.jpg">
<br><br><br>
<div id="visBillede" style="text-align:center;visibility:hidden;">
<img id="bigImage" onmouseover="changeImage()" border="0" width="400" height="300" src="landscape2.jpg"><br>Milk</div>
</body>
</html>

hth
jes

Synes godt om

mikkel_strack Nybegynder

17. august 2003 - 07:48 #11

Det var ikke helt som jeg skulle bruge - for der er teksten jo ikke dynamisk hvis der er mere end et billede.
Men med udgangspunkt i dit fik jeg hæftet den der med innerHTML på - og nu ser det rent faktisk ud til at virke :o)

Hvis du har lyst må du gerne lige kigge koden igennem for overflødige levn fra den kode du skrev ovenfor. Er noget med texten jo...
Så hvis du lige skriver det som et svar - så jeg kan få spørgsmålet lukket.

Kan iøvrigt se du svarer på en del rundt omkring, så hvis du har tid og lyst skal du da være velkommen til lige at suse forbi det her spm :o)
http://www.eksperten.dk/spm/388533

.....................koden.................

<html>
<head>

<script type="text/javascript">
img2=new Image()
img2.src="landscape3.gif"
img3=new Image()
img3.src="landscape3.gif"

function changeImage()
{
document.getElementById('visBillede').style.visibility=(document.getElementById('visBillede').style.visibility=='hidden')?'visible':'hidden';
}

function gettip(txt)
{
tip.innerHTML=txt
}

function reset()
{
tip.innerHTML=""
}
</script>

</head>
<body>

<div align="center">
<table width="720" border="0" cellspacing="0" cellpadding="5" align="center" height="404">
<tr>
<td width="130" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('1')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('2')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td height="90" width="130">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('3')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('4')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('5')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
</tr>
<tr>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('6')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td colspan="3" rowspan="4">
<div align="center"><div id="visBillede" style="text-align:center;visibility:hidden;">
<img id="bigImage" onmouseover="changeImage()" border="0" width="409" height="290" src="landscape3.gif"><p id="tip"></p></div></div>
<div align="center">
<h6> </h6>
</div>
</td>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('7')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
</tr>
<tr>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('8')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('9')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
</tr>
<tr>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('10')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('11')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<tr>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('12')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage();gettip('13')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>
</tr>
</table>
</div>

</table>
</body>
</html>

Synes godt om

roenving Novice

17. august 2003 - 12:03 #12

Nu er det i princippet en alvorlig fejl at have flere elementer med samme id, for det _skal_ være unikt, men så længe du ikke bruger id'et til noget får du ikke fejl ...

-- og så skulle billedet vel også skifte (og lige en anelse mere overskuelig kode !-):

function changeImage(src)
{
document.images['bigImage'].src = src;
st = document.getElementById('visBillede').style;
st.visibility=(st.visibility=='hidden')?'visible':'hidden';
}

og så:

<td width="130" valign="top" height="90">
<div align="center"><img id="myImage" onmouseover="changeImage(this.src);gettip('13')" onmouseout="changeImage();reset()" border="0" width="120" height="90" src="landscape3.gif"></div>
</td>

-- og hvorfor nøjes du ikke med:

<td colspan="3" rowspan="4">
<div id="visBillede" style="text-align:center;visibility:visible;">
<img id="bigImage" onmouseover="changeImage()" border="0" width="409" height="290" src="landscape3.gif">
<h6>Karl </h6>
</div>
</td>

Synes godt om

mikkel_strack Nybegynder

20. august 2003 - 14:33 #13

Det kunne jeg sgu ikke til at virke...men fik lavet det på den her måde istedet:

function chgImg(imgField,newImg) {
if (document.images) {
document[imgField].src= eval(newImg + ".src")
}
}

function gettip(txt)
{
tip.innerHTML=txt
}

function reset()
{
tip.innerHTML=""
}
</script>

</head>

<body bgcolor="#000000" text="#FFFFFF" fontface="verdana, arial, helvetica, sans-serif" size="2" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table width="721" border="0" cellspacing="0" cellpadding="5" align="center" height="460">
<tr>
<td width="131" height="110">
<div align="center"><A HREF="#.html" onMouseover="chgImg('tom','img4');gettip('<%Response.Write arrText(3)%>')" onMouseout="chgImg('tom','img0');reset()"><img src="<%Response.Write arrPics(3)%>" width="120" height="90" border="0"></a></div>
</td>
<td width="133" height="110">
<div align="center"><A HREF="#.html" onMouseover="chgImg('tom','img2');gettip('<%Response.Write arrText(1)%>')" onMouseout="chgImg('tom','img0');reset()"><img src="<%Response.Write arrPics(1)%>" width="120" height="90" border="0"></a></div>
</td>. . . .
.
.
.
.
.

du må lige svare så vi kan få afrenget og lukket :o)

Synes godt om

roenving Novice

20. august 2003 - 15:52 #14

oki '-)

Synes godt om

roenving Novice

20. august 2003 - 16:31 #15

-- og tak for points ;~}

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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