Notifikationer

Markér alle som læst Log ud

krk Nybegynder

23. august 2010 - 14:54 Der er 7 kommentarer og
1 løsning

onclick ny div

Hej

Jeg har 6 billeder der ligger ved siden af hinanden.
Jeg vil gerne at når jeg klikker på billede1 så åbner der en div ud under billede med noget tekst.

Klikker man så på billede2 åbner der sig en ny div under dette billede med noget tekst og samtidig lukker div'en sig under billede1.

Osv. for de resterende billeder.

Giver det mening det jeg skriver.

Jeg har 2 problemer her.
1. jeg er ikke særlig god til javascript (men vil gerne blive bedre)
2. mit dårlige kendskab til JS gør at jeg har svært ved at finde det rigtige eksempel på googel :-(

Kan I hjælpe med at finde et godt eksempel eller et par søgeord der giver mening vil være også være fint :-)

Synes godt om

claes57 Ekspert

23. august 2010 - 15:26 #1

du kan også have et felt/plads til tekst, og så lade klik på billede skifte teksten. Jeg synes ofte det er lettet at se når man ikke skal flytte synsfeltet hele tiden.

Synes godt om

madand Nybegynder

23. august 2010 - 15:41 #2

Jeg tror at Javascript Lightbox vil klare dit problem :) Hvis ikke du kender den eller vil lave din helt egen version:

http://leandrovieira.com/projects/jquery/lightbox/

Synes godt om

madand Nybegynder

23. august 2010 - 15:51 #3

Flere eksempler her: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Synes godt om

kalp Novice

23. august 2010 - 15:56 #4

Det er ikke den mest elegante løsning.. men det virker da:)

<HTML>
<HEAD>
<TITLE> </TITLE>
<script type="text/javascript">
function showText(id){
var divs = document.getElementsByTagName('div');
var clickedDiv = document.getElementById(id);
clickedDiv.getElementsByTagName('div')[0].className = 'show';
var i = 0;

for(i = 0;i < divs.length; i++){
if(divs[i].id != id && divs[i].parentNode != null && divs[i].parentNode.id != id){
if(divs[i].getElementsByTagName('div')[0] != null)
divs[i].getElementsByTagName('div')[0].className = 'noShow';
}
}
}
</script>
<style type="text/css">
.noShow {
display:none;
}
.show {
display:block;
}
</style>
</HEAD>

<BODY>

<div onclick="showText(this.id)" id="et" >
<img src=""/>
<div class="noShow">Billede et</div>
</div>
<div onclick="showText(this.id)" id="to" >
<img src="" />
<div class="noShow">Billede to</div>
</div>
<div onclick="showText(this.id)" id="tre" >
<img src="" />
<div class="noShow">Billede tre</div>
</div>

</BODY>
</HTML>

Synes godt om

kalp Novice

23. august 2010 - 15:59 #5

hvis du har mange divs på din side, så er det måske lidt et overkill at løbe dem alle igennem.. men så skal du blot ligge en ydrer div om de nuværende og give den den ide.

På den måde kan du løbe igennem de divs du er interesseret i og ikke andre.

Synes godt om

krk Nybegynder

24. august 2010 - 10:04 #6

kalp: Tak,det var lige det jeg skulle bruge.

Jeg blev nød til at lave span (istedet for en div) rundt om billede for at få det til at virke.

Jeg forstod ikke helt det sidste du skrev "hvis du har mange divs på din side, så er det måske lidt et overkill at løbe dem alle igennem.. men så skal du blot ligge en ydrer div om de nuværende og give den den ide."

hvis jeg ligger en div rundt om alle de diver du har oprettet i dit eksempel og giver den en id="yderdiv". Hvad skal jeg så skrive i js?

Du henter bare point.

Synes godt om

kalp Novice

24. august 2010 - 12:29 #7

var divContainer = document.getElementById('yderdiv');
var divs = divContainer.getElementsByTagName('div');

Du skal måske lige rette getElementsByTagName('div') til ('span') hvis du har rettet i min oprindelig kode som du skrev:)
:)

Synes godt om

krk Nybegynder

24. august 2010 - 12:44 #8

Tak for hjælpen

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