nybegynnerhjelp: onmouseover og onclick

[Yawa]

Forsøker å få til ett opplegg slik at når en bruker holder markøren over en link, så vises en tekst i en <div> rett nedenfor. Og når en bruker klikker på linken, så aktiveres highslide-scriptet med mer utfyllende informasjon etc.

 

Men må starte en vei. og det er nå hvordan man setter opp en slik onmouseover="" og en onclick="" opplegg.

 

I div'en som teksten skal vises (onmouseover"") satt jeg opp en switch-kommando. Men fikk ikke til å bruke den...

 

Noen som vet om en god guide for meg?

 

EDIT: Satt opp denne funksjonen da:

function show(id, visibility)
 {
   document.getElementById(id).style.display = visibility;
 }

 

Så bruker jeg den slik:

<a onMouseOver="show('content1', 'inline');" onMouseOut="show('content1','none');">content 1</a>
<a onMouseOver="show('content2', 'inline');" onMouseOut="show('content2','none');">content 2</a>
<a onMouseOver="show('content3', 'inline');" onMouseOut="show('content3','none');">content 3</a>
<a onMouseOver="show('content4', 'inline');" onMouseOut="show('content4','none');">content 4</a>

<div class="disp_none" id="content1"><p>Informasjon om <strong>content 1</strong></p></div>
<div class="disp_none" id="content2"><p>Informasjon om <strong>content 2</strong></p></div>
<div class="disp_none" id="content3"><p>Informasjon om <strong>content 3</strong></p></div>
<div class="disp_none" id="content4"><p>Informasjon om <strong>content 4</strong></p></div>

 

Deet fungerer veldig greit, sålangt. Men det som er, er at jeg vil ha det slik at når brukeren tar markøren vekk fra "knappen", så forsvinner ikke innholdet.

Og når den beveges til en annen en, så byttes det over.

Eneste jeg har fått til sålangt er at de holdes hver og en, alstå listes opp etterhverandre.

 

Den som nettopp var aktiv må gjemmes igjen ved onmouseout

 

Noen tips?

Endret 14. mai 2010 av Yawa

[Runar]

Hei!

 

Jeg foreslår du bruker et rammeverk med navn jQuery. Dette rammeverket har støtte for de funksjonene du er ute etter, i tillegg til mye mer. For å vise hvor enkelt det er, brukte jeg et par minutter på å lage det du spør om. Koden er testet og virker men kan nok optimaliseres:

 

<script type="text/javascript">
$(document).ready(function() {
$( '.content-1' ).hover(
	function () {
		$( '#content-1' ).toggle();
	}
);

$( '.content-2' ).hover(
	function () {
		$( '#content-2' ).toggle();
	}
);
});
</script>

<a class="content-1">innhold 1</a>
<a class="content-2">innhold 2</a>

<div id="content-1" style="display: none">
<p>Informasjon om innhold 1</p>
</div>

<div id="content-2" style="display: none">
<p>Informasjon om innhold 2</p>
</div>

[Skagen]

Hvis du ikke ønsker noe avanserte greier med JQuery e.l., kan du utbedre funksjonen din slik:

 

function show(id) {
  var el = document.getElementById(id);
  if(el) {
     el.style.display = (el.style.display == 'none') ? 'inline' : 'none';
  }
}

 

Og så i HTMLen:

 

<a onmouseover="show('content1');" onmouseout="show('content1');">content 1</a>

<div class="disp_none" id="content1" style="display: none;"><p>Informasjon om <strong>content 1</strong></p></div>

 

Går også an å lage en script som kjører når siden er ferdiglastet som leter igjennom alle elementene, og setter opp onmouseover og onmouseout automatisk slik at du slipper å tenke på å nummerere dem riktig.

[Yawa]

Det ser noe lettere ut med jQuery ser jeg. Endte opp med dette opplegget etter endel leting (og "fletting"):

 

// JavaScript Document
function show_hide()
{
 var args=show_hide.arguments;

 if(document.getElementById)
 {
   for(var i=0;i<args.length;i+=2)
   {
     if(document.getElementById(args[i])!=null)
     {
       if(document.sh_hold)
       {
         for(var k=0;k<sh_dco.length-1;k+=2)
         {
           if(args[i]==sh_dco[k])
           {
             args[i+1]=sh_dco[k+1];break;
           }
         }
       }
       document.getElementById(args[i]).className=args[i+1];
     }
   }
 }
}

/* CSS Document */

/* show_hide */
.inline { display:inline; }
.none { display:none; }
/* hide_show: end */

 

Og så caller det hele slikleis:

<a onmouseover="show_hide('content1','inline','content2','none','content3','none','content4','none')" onmouseout="show_hide('content1','inline','content2','none','content3','none','content4','none')">content1</a>

<a onmouseover="show_hide('content1','none','content2','inline','content3','none','content4','none')" onmouseout="show_hide('content1','none','content2','inline','content3','none','content4','none')">content2</a>

<a onmouseover="show_hide('content1','none','content2','none','content3','inline','content4','none')" onmouseout="show_hide('content1','none','content2','none','content3','inline','content4','none')">content3</a>

<a onmouseover="show_hide('content1','none','content2','none','content3','none','content4','inline')" onmouseout="show_hide('content1','none','content2','none','content3','none','content4','inline')">content4</a>

 

Divisjonene som gjemmes/vises er satt opp slik at content1 vises når siden lastes.

<div class="inline" id="content1"> ... </div>
<div class="none" id="content2"> ... </div>
<div class="none" id="content3"> ... </div>
<div class="none" id="content4"> ... </div>

 

Men deres ser jo endel lettere ut. Eneste jeg har opplevd tidligere er kompatibilitet med IE.

Dette oppsettet funker smell...

 

Men, noen tips til hvor jeg kan lære endel om jQuery. Mye intressant der som jeg kunne tenke meg å få til. Bare at jeg har lyst til å få forståelsen av ting og tang også. Ikke bare cocy/paste...

 

Men takker for svar... kjempe...

Endret 15. mai 2010 av Yawa

[Skagen]

Eneste kommentaren jeg har er at det blir veldig redundant/unødvendig å oppgi "none" og "inline" som argumenter til funksjonen. Det er bedre å bygge dette rett inn i funksjonen, og la den "toggle" synligheten basert på tilstanden, framfor at du eksplisitt oppgir det i HTMLen som argumenter.

[Yawa]

okay, forslag til løsning for meg. klarer ikke helt se hvor/hvordan jeg kan sette det...

[Skagen]

Jeg skrev kode for dette i det første innlegget mitt.

Men siden du tydeligvis bruker CSS-klasser som angir display-attributtet, kan du heller toggle klassenavnet framfor display direkte om du vil:

 

(Basert på koden i første innlegget mitt i denne tråden)

el.className = (el.className == 'none') ? 'inline' : 'none';