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

agersten Nybegynder

26. oktober 2007 - 17:14 Der er 31 kommentarer og
1 løsning

mouse over billede skal blive til tekst. Frontpage

Hej gæve Eksperter!

Jeg er ved at arbejde lidt på et nyt design. På min indgangsside er der tre billeder, når kan holder musen over, skal der komme en tekst frem.
http://img.photobucket.com/albums/v203/Agersten/Julie-Agersten-1.gif
dette er et billede af forsiden. første billede skal fx forsvinde og der skal komme "photography" frem i stedet og meget gerne på en elegant måde ved mouse over! :)

takker på forhånd!!

Julie

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 17:23 #1

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 17:23 #2

jeg tror det ville virke nogenlunde sådan :)
Hvis du har et andet element rundt om dit billede, så kan du bare putte det på det ..

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 17:24 #3

Vupsi .. ahvde ikke set du skrev frontpage :)
Men hvis du går ind i HTML-koden og indsætter det, burde det stadig virke..

Synes godt om

w13 Novice

26. oktober 2007 - 17:25 #4

Hej Julie.

Skal vi så finde på den elegante måde? :)

Jeg ville umiddelbart sige noget à la:
--------------------------------------
<script type="text/javascript">
function ReplaceImgWithText(elm,id){
id=document.getElementById(id);
elm.style.display=elm.style.display=="none"?"inline":"none";
id.style.display=id.style.display=="none"?"inline":"none";
}
</script>

<img src="billede.jpg" onmouseover="ReplaceImgWithText(this,'text1')" onmouseout="ReplaceImgWithText(this,'text1')">

<div id="text1" style="display:none">Tekst her</div>
----------------------------------------------------
Der kan så lægges elegant CSS på div'en :)

Synes godt om

w13 Novice

26. oktober 2007 - 17:26 #5

Ahr, din løjser Søren. Du var hurtigere, og jeg glemte at rette et par ting i min.

Synes godt om

agersten Nybegynder

26. oktober 2007 - 18:52 #6

takker for jeres svar! nu har jeg lagt min test online - dén af jer der først får bøjet i neon, hvor jeg sætter det ind, for pointne! men jeg advarer, for jeg må nok have lidt hjælp til at få det hele indsat rigtigt før det virker, er sgu ikke så sej til det ;)
http://www.julie-agersten.dk/test.htm

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 19:22 #7

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<TITLE>Julie Agersten.dk - Horsephotographer</TITLE>
<META NAME="Description" CONTENT="Horsephotographer/ Hestefotograf Julie Agersten: Julie-Agersten.dk indeholder primært billeder af fuldblodsarabere bla billeder af mine heste samt billeder fra div shows fx All Nations Cup 05.">
<meta name="Keywords" content="julie agersten, photography, turban stud, nikon ">
<META NAME="Copyright" CONTENT="julie agersten">
<META NAME="Robots" CONTENT="INDEX,NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="false">
<link rel="shortcut icon" href="Images/favicon.ico">

<style type="text/css">
.style1 {
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 0px;
margin-right: 0px;
}
.style2 {
border-style: none;
border-width: medium;
}
.style4 {
text-align: center;
white-space: nowrap;
}
.style5 {
margin-left: 0px;
}
.style6 {
border-left-style: none;
border-left-width: medium;
}
.style7 {
background-image: url('Images/Baggrunde/Julie-Agersten.jpg');
}
</style>
<script type="text/javascript">
function ToggleImg(obj){
obj.getElementsByTagName('img')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
obj.getElementsByTagName('span')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
}
</script>
</head><body>
<div id="main2">
<table style="height:100%;width:100%;"><tbody><tr><td>

<table border="0" cellpadding="0" cellspacing="0" style="width:966px; height:502px; margin:0px auto;" class="style7">
<tbody><tr>
<td valign="top" style="width: 111px; height: 92px">

</td>
<td valign="top" style="height: 92px">

</td>
</tr>
<tr>
<td valign="top" style="width: 111px">

<div>
</div>

</td>
<td height="367" valign="top" width="790">

<table style="width: 100%" class="style1">
<tr>
<td style="height: 329px; width: 349px" class="style2">
<table style="width: 100%">
<tr>
<td class="style4" style="width: 26px"> </td>
<td class="style4" style="width: 52px" onmouseover="ToggleImg(this);" onmouseout="ToggleImg(this);">
<img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5">span style="display:none;">Tekst..</span></td>
</tr>
</table>
</td>
<td style="height: 329px; width: 357px" class="style2">
<table style="width: 100%">
<tr>
<td style="width: 162px">
<img src="Images/Baggrunde/Sesse.jpg" width="198" height="198"></td>
</tr>
</table>
</td>
<td style="height: 329px; width: 428px" class="style6">
<table style="width: 100%">
<tr>
<td style="width: 234px">
<img src="Images/Baggrunde/Mocca.jpg" width="198" height="198"></td>
<td> </td>
</tr>
</table>
</td>
<td style="height: 329px; width: 208px"> </td>
</tr>
</table>
</td>
</tr>
</tbody></table>

<font color="#CCCCCC">

</div>

</font>

<p style="text-align:center;margin-top:40px;"> </p>

</td></tr></tbody></table>
</body></html>

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 19:23 #8

Dette burde gøre det .... Der mangler en '<' der i koden hvor der står "span>"...
så det bliver:

<img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5"><span style="display:none;">Tekst..</span></td>

Synes godt om

agersten Nybegynder

26. oktober 2007 - 19:44 #9

Så har jeg sat det ind, men det er ikke helt godt. Det første billede forsvinder bare, og så rykker de to andre til siden.
du kan lige prøve at se C:\Users\Jules\Documents\Mine websteder\test.htm

egentlig tænkte jeg, om det ville være bedre/ lettere at "toggle" mellem to billeder, i stedet for billede og tekst?
for så laver jeg et billede med "photography" i PS... Så kan jeg også lave det med den skrifttype, jeg gerne vil have og stadig sikre mig, alle kan se den.
Og sidst men ikke mindst: hvordan får jeg lavet "photography" til et link, så brugeren kan gå ind på siden?

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 19:53 #10

det er nemmere hvis du har to billeder.. Jeg laver lige koden til du har to billeder :)

Synes godt om

agersten Nybegynder

26. oktober 2007 - 19:54 #11

super, takker!! :D

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 19:56 #12

function ToggleImg(obj){
obj.getElementsByTagName('img')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
obj.getElementsByTagName('span')[0].style.display = obj.getElementsByTagName('img')[0].style.display == 'inline' ? 'none' : 'inline';
}

Dette skal bare fjernes. Og så skal dette ændres:

<td class="style4" style="width: 52px" onmouseover="ToggleImg(this);" onmouseout="ToggleImg(this);"><img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5">span style="display:none;">Tekst..</span></td>

til:

<td class="style4" style="width: 52px"><a href="dit link her.."><img src="Images/Baggrunde/Ramino.jpg" width="198" height="198" class="style5" onmouseover="this.setAttribute('src','dit andet billede')" onmouseout="this.setAttribute('src','Images/Baggrunde/Ramino.jpg')"></a></td>

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 19:56 #13

Prøv at se om det virker :)

Synes godt om

agersten Nybegynder

26. oktober 2007 - 20:25 #14

det virker :) men den laver en farvet ramme omkring, selvom jeg har skrevet, det skal være sort? vil det være let at indsætte en kode, sådan så der er en glidende overgang mellem de to? ;)

jeg skal nok stoppe med flere spørgsmål, så du kan nyde din fredag aften ;)

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 20:45 #15

hvordan farver ramme? omkring billedet?

Hvordan glidende? Noget der fader?

Synes godt om

agersten Nybegynder

26. oktober 2007 - 20:54 #16

http://www.julie-agersten.dk/test.htm du kan se en lilla ramme omkring billedet med linket, men har har bedt den om at lave aktivt link sort, så jeg forstår det ikke.

Jep fade mellem de to billeder :)

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:03 #17

Du kan i din css-kode skrive:

img{border:0;}

Det burde løse det. Jeg vender tilbage om lidt med den fadefunktionen :)

Synes godt om

w13 Novice

26. oktober 2007 - 21:07 #18

Hvis den skal være sort, burde du også kunne:

img{border-color:#000000}

Hvis det ikke virker, er det fordi links-css'en overgår denne.

Synes godt om

agersten Nybegynder

26. oktober 2007 - 21:13 #19

den sidste virker, tak :)

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:22 #20

Prøv at tilføje dette:

<script type="text/javascript">
var opacity=100;
var box;
var imgsrc;
function FadeIn(){
box.style.filter="alpha(opacity="+opacity+")";
box.style.MozOpacity=opacity/100;
box.style.opacity=opacity/100;
box.style.Opacity=opacity/100;
opacity+=2;
if(opacity<=100){setTimeout("FadeIn()",2)}
}
function FadeOut(){
box.style.filter="alpha(opacity="+opacity+")";
box.style.MozOpacity=opacity/100;
box.style.opacity=opacity/100;
box.style.Opacity=opacity/100;
opacity-=2;
if(opacity>=50){setTimeout("FadeOut()",2)}
else{box.setAttribute("src",imgsrc);FadeIn();}
}
</script>

Dernæst skal onmouseover og onmousseout ændres til:

onmouseover="box=this;imgsrc='Images/Baggrunde/photography.jpg';FadeOut();" onmouseout="imgsrc=Images/Baggrunde/Ramino.jpg';FadeOut();"

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:24 #21

Denne funktion kan du også kalde på de andre billeder, hvis du bare kopiere onmouseover og onomuseout. Hvis du undrer dig over hvorfor der er så mange forskellige opacity i funktionen, er det fordi den bl.a. både i Internet Explorer, Firefox, Seamonkey, Safari, Opera, Netscape :)

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:24 #22

Prøv at tjek om det virker.

Synes godt om

agersten Nybegynder

26. oktober 2007 - 21:37 #23

cool, det ser fint ud på min skærm :) har ikke lagt det op, men det er super, så smid du bare et svar! :D

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:42 #24

Det var godt. Altid er altid rart når det man laver virker! :)

Synes godt om

agersten Nybegynder

26. oktober 2007 - 21:45 #25

tusind tak for hjælpen og fortsat god weekend! :D

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 21:47 #26

I lige måde!

Jeg vil med glæde hjælpe en anden gang :)

Synes godt om

agersten Nybegynder

26. oktober 2007 - 22:05 #27

tak :) så vil jeg være belastende med det samme : onmouseout virker sgu ikke... :( så hvis du får tid, må du meget gerne komme med et forslag! :)

Synes godt om

w13 Novice

26. oktober 2007 - 22:21 #28

Søren mangler en apostrof:

onmouseout="imgsrc='Images/Baggrunde/Ramino.jpg';FadeOut();"

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 22:32 #29

Hov, virker det med apostrofen ?

Synes godt om

agersten Nybegynder

26. oktober 2007 - 22:43 #30

yes sirs, det var bare det *GG* tak igen ;)

Synes godt om

soerenlyn Nybegynder

26. oktober 2007 - 23:07 #31

Ja - tak Hr. web13 :D

Synes godt om

w13 Novice

26. oktober 2007 - 23:30 #32

Jamen det var da så lidt, Hr. Søren Lyn.

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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