Avatar billede anderseiler Nybegynder
07. november 2006 - 14:08 Der er 12 kommentarer og
1 løsning

Information ved onmouseover i link

Halløjsa..

Jeg søger hjælp til at få lavet en javascript funktion. Det er lidt svært at beskrive, så jeg har lige et link:

http://thottbot.com/?s=bloodcaller

prøv at føre musen over det billlede af den økse/sværd/kniv-ting i midten af billedet. Så kommer der sådan en boks frem med informationer.

Er der én som kan hjælpe mig med at få lavet sådan en? Jeg har ikke den store idé om hvordan jeg gør nemlig :)

Hvis det er muligt, så skal indholdet af den boks gerne være en PHP variabel!


Mvh
Anders :)
Avatar billede udvikler Nybegynder
07. november 2006 - 14:21 #1
Avatar billede udvikler Nybegynder
07. november 2006 - 14:38 #2
Hvis du ikke helt kan finde ud af det, har jeg lavet et exempel her:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="Javascript">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

<style type="text/css">
#div1 {
    position:absolute;
    top: 100;
    left: 200;
    width:200;
    visibility:hidden
}
</style>
</head>

<body>


<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)">
<img src="billede.jpg" border="0" title="">
</a>

<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div>


</body>

</html>
Avatar billede anderseiler Nybegynder
07. november 2006 - 16:46 #3
Hej.. Det er næsten hvad jeg søger...

Det som sker i ovenstående er, at uanset om teksten vises eller ej, så fylder divboksen på siden. Kan man ikke gøre sådan, at divboksen kommer frem, nærmest som et lag oven på det andet? Sådan at det ikke går ind og blander sig i resten af designet.

Ellers virker det kanon godt :)
Avatar billede roenving Novice
07. november 2006 - 16:59 #4
Hrm, der var faktisk en del uhensigtsmæssigheder i den kode, prøv f.eks.:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test mouse-over</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function toggleDiv(id,flagit) {
  var stObj;
  if (document.getElementById)
    stObj = document.getElementById(id).style;
  else if (document.all)
    stObj = document.all[id].style;
  else if (document.layers)
    stObj = document.layers[id];
  stObj.display = flagit == 1 ? "block" : "none";
}
</script>

<style type="text/css">
#div1 {
    position:absolute;
    top: 100px;
    left: 200px;
    width:200px;
    display:none;
    z-index:23;
}
</style>
</head>

<body>


<img src="billede.jpg" border="0" title="" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">

<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div>


</body>

</html>
Avatar billede anderseiler Nybegynder
07. november 2006 - 17:04 #5
Der ser ud til at jeg gav mine point for tidlig :/ De skulle vist have været delt - det må vi lige se på senere.

Men jeg har samme problem med, at når div boksen kommer frem, så rykker den i hele designet. Men roenving, din kode fungerer lidt bedre tror jeg? Men kan man ikke gøre sådan, at den ligger i et lag oven på alt det andet? Sådan at den ikke går ind og bryder designet?
Avatar billede roenving Novice
07. november 2006 - 17:29 #6
Div-boksen ligger i et lag ovenover, så du må lave noget anderledes end både udvikleren og jeg har gjort !-)

-- kan du f.eks. linke til et eksempel ?-)
Avatar billede anderseiler Nybegynder
07. november 2006 - 17:39 #7
Det er rigtigt - det er fordi jeg ændrede i position:absolute; uden at tænke ydeligere over det. Men jeg vil have den til at sætte sig der hvor billedet er/curser'en, i stedet for en fast position.

Det er vel noget CSS trylleri, ikke? :)

Så er der også en masse andre småproblemer - men dem tror jeg nok selv jeg kan løse (det fucker åbenbart mit design op, men det fixer jeg selv) :)
Avatar billede udvikler Nybegynder
07. november 2006 - 18:49 #8
Her er halvdelen roenving - http://www.eksperten.dk/spm/743364

:-)
Avatar billede anderseiler Nybegynder
07. november 2006 - 21:51 #9
Nice, tak for ulejligheden udvikler.

Men er der en af jer der ved, hvordan man kan gøre sådan, at divboksen kommer frem der hvor musen er? Eller der hvor billedet som åbner divboksen er? Det kunne være SÅ lækkert :)
Avatar billede udvikler Nybegynder
07. november 2006 - 22:13 #10
Det kan vel laves, men så skal man være hardcore til javascript, der skal spørge de bedste til javascript på sitet som efter min mening er roenving eller olebole. (dog kan jeg tage fejl, jeg er mere til PHP)
Avatar billede anderseiler Nybegynder
08. november 2006 - 07:28 #11
Okay... Men jeg kan vel godt oprette en ny tråd hvor jeg spørger om hjælp til det, ikke? Uden at folk ryger i flæsket på mig for at oprette flere tråde om det samme mv... (med mindre roenving selvfølgelig lige kan det i hovedet og poster det :))

:)
Avatar billede udvikler Nybegynder
08. november 2006 - 14:23 #12
Naah, det burde være en ting man lige hurtigt kan fixe, dog skal man være god til javascript - hvilket jeg ikke helt er. Kan det mest basale :)

Tror sagtens du kan poste alt i ét spørgsmål uden at du hører klager.
Avatar billede anderseiler Nybegynder
08. november 2006 - 16:21 #13
Okay...

Jeg havde en utrolig engelsktime i dag, så fik jeg det selv ordnet der :) Næste problem er bare at få det rigtige indhold :) Men det klarer jeg selv!

1000 tak for hjælpen, begge to!

Mvh
Anders
Avatar billede 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.

Loading billede Opret Preview

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