Avatar billede passiflora Juniormester
05. november 2007 - 01:20 Der er 17 kommentarer og
1 løsning

Onclick viser Div tag

Hejsa.

Jeg har fået hjælp til noget mouseover, virker fint, men vil gerne lidt længere måske, hvis det rette vej.

Jeg har nogle thumps i min venstre side, og ved mouseover visende et større billed i venstre side, fint nok.

Nu kunne jeg så godt tænke mig om jeg kunne få en beskrivelse frem af de pågældende billede, når der klikkes på thump'en

Beskrivelsen ligger i en access database, og få dem vist er sikkert ikke problemet

Kan man bruge onclick, kan det trylle f.eks et divtag frem, hvori tingene stod, eller skal mit lille hoved gå en anden vej.

Herunder lidt af min nuværende kode ---

<script type="text/javascript">
function handleOver(src){
document.getElementById("largeimg").firstChild.setAttribute("src",src);
document.getElementById("largeimg").style.display="inline";
}

function handleOut(){
document.getElementById("largeimg").style.display="none"
}
</script>

---

<div id="b1">
      <a title="Spejderi.dk" href="http://www.spejderi.dk"
      onMouseOver="handleOver('produkt/Cambria.jpg')" onMouseOut="handleOut()">
      <img name="img" align="center" border="0" src="produkt/small/Cambria.jpg"> </a>
    </div>
    <div id="largeimg" align="center" style="display:none">
      <img>
    </div>

Mon det blev forståeligt ...

Søren
Avatar billede roenving Novice
05. november 2007 - 01:30 #1
F.eks.

<script type="text/javascript">
function handleOver(src,txt){
document.getElementById("largeimg").firstChild.setAttribute("src",src);
document.getElementById("largeimg").style.display="inline";
document.getElementById('imgTxt').firstChild.nodeValue = txt;
document.getElementById('imgTxt').style.display = 'block';
}

function handleOut(){
document.getElementById("largeimg").style.display="none"
document.getElementById('imgTxt').style.display = 'none';
}
</script>

---

<div id="b1">
      <a title="Spejderi.dk" href="http://www.spejderi.dk"
      onMouseOver="handleOver('produkt/Cambria.jpg','Den smukke solnedgang')" onMouseOut="handleOut()">
      <img name="img" align="center" border="0" src="produkt/small/Cambria.jpg"> </a>
    </div>
    <div id="largeimg" align="center" style="display:none">
      <img>
    </div>
    <div id="imgTxt" style="display:none;text-align:center;">&nbsp;</div>
Avatar billede passiflora Juniormester
05. november 2007 - 09:00 #2
Nu jeg ikke hverken halvt eller kvart skarp til js.

Men har jeg ikke ret i at din tilføjelse her, kunne ville give mig en overskrift ved mouse over.

Ikke at jeg ikke også kan bruge det :)
Avatar billede w13 Novice
05. november 2007 - 13:58 #3
Nej, Roenvings eksempel burde give dig en tekst under billedet.
Avatar billede passiflora Juniormester
05. november 2007 - 14:13 #4
Ja den giver tekst ved mouseover ...

... og ikke ved onclick
Avatar billede w13 Novice
05. november 2007 - 14:27 #5
Så:
onclick="document.getElementById('imgTxt').firstChild.nodeValue='Beskrivelse her'"
?
Avatar billede passiflora Juniormester
05. november 2007 - 23:54 #6
Tak.

Så skal jeg bare have rettet html delen til.

Og for hvert af de 10 text stykker jeg skal have ind fra min database, laver jeg så et ; og tilføjer det i handleOver.

Må jeg lige lege lidt med.

Tak.

Vil I dele ... eller ..
Avatar billede w13 Novice
05. november 2007 - 23:59 #7
Nej, de går ubeskåret til Roenving! :P
Avatar billede roenving Novice
06. november 2007 - 15:59 #8
Velbekomme '-)
Avatar billede passiflora Juniormester
06. november 2007 - 16:10 #9
Fordelt som ønsket.

Nu mangler jeg blot at får det til at virke i firefox

Tak igen.
Avatar billede roenving Novice
06. november 2007 - 16:19 #10
Hvordan virker det ikke i FF ?-)

-- els tak for point ;~}
Avatar billede passiflora Juniormester
06. november 2007 - 17:32 #11
Velbekom.

Hele mouseover halløjen, det eneste der sker ved mouse over er at linket vidre er aktivt ...
Avatar billede w13 Novice
07. november 2007 - 15:13 #12
Så ku' du jo smide et link, så vi ku' se det. =) Det skal virke. Det er kodet helt efter standard.
Avatar billede passiflora Juniormester
07. november 2007 - 15:45 #13
Det kunne jeg :) ... Har ikke fået det sidste rettet ind, men det første burde også virke ...

www.spejderi.dk/bh
Avatar billede w13 Novice
07. november 2007 - 15:57 #14
Tror jeg ved, hvad fejlen er. Ret:
    <div id="largeimg" align="center" style="display:none">
      <img>
    </div>
Til:
    <div id="largeimg" align="center" style="display:none"><img></div>

Har før oplevet, at firefox oplever linjeskift som tekstelementer. Så måske prøvede den at sætte src på et linjeskift..
Avatar billede passiflora Juniormester
07. november 2007 - 16:11 #15
Tak ... det tester jeg lige ... syns ellers det ser mere overskuelig ud .. :)
Avatar billede w13 Novice
07. november 2007 - 16:16 #16
Ja, men firefox forstår ikke noget :)
Avatar billede passiflora Juniormester
08. november 2007 - 23:08 #17
... og w13 som ventet har du jo ret. Ved at fjerne linieskift, så kører vi.

Er det ikke en fordel af FireFox intet forstår

Så der kun databasen tilbage. En gang må jeg lige få mig taget sammen til at kigge på sql og ikke bar bruge access

Tak for hjælpen.
Avatar billede roenving Novice
09. november 2007 - 00:21 #18
-- godt du lige kunne hjælpe det sidste stykke, w13 (jeg havde lige glemt den krølle ,-)
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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