Endnu et billedskift

Jamen, så skal du lave sådan noget som:

<img src=\'ditBilde.gif\' onMouseOver=\"this.src=\'detAndetBilde.gif\'\">

hth
jes

onClick, sæ\'fø\'li\'

Forøvrigt er det ikke sådan, at det nogensinde skal stilles tilbage ??-)

Jo, billedet skal \"reset´es\" når jeg likker på et af de andre billeder. Ellers har jeg jo lige pludselig \"valgt\" 4 emner samtidig. SÅ det skal scriptet også kunne gøre!

Måske en meget udvidet funktion:

<img src=\'ditBilde.gif\' onClick=\"this.src=\'detAndetBilde.gif\';var clicked=true;\" onMouseOver=\"this.src=\'detAndetBilde.gif\';\" onMouseOut=\"if(!clicked)this.src=\'ditBilde.gif\';\">

Hmm, ja. Men hor er det så jeg sætter hvilket doc som skal åbnes når jeg klikker. Pt. har jeg et script som gør halvdelen af det jeg vil have. Det mangler bare at kunne \"reset´e\" billedet tilbage når jeg klikker på et af de andre. Scriptet ser således ud :
<a href=\"reparation.html\" onmouseover=\"document.all[\'picture\'].src=\'Images/reparation_v.gif\'\"> <img border=\"0\" id=\"picture\" src=\"Images/reparation.gif\" width=\"92\" height=\"13\"></a>

Er det så nogle bestemte billeder eller er det alle billederne i din frame (nå, det kan vi jo også styre os uden om at bekymre os om !-)

<script language=\'Javascript>
var startimg = new Array();
startimg[0] = new Image();startimg[0].src = \'detFoersteBillede.gif\';
startimg[1] = new Image();startimg[1].src = \'detAndetBillede.gif\';
var slutimg = new Array();
slutimg[0] = new Image();slutimg[0].src = \'detFoersteBilledeEfter.gif\';
slutimg[1] = new Image();slutimg[1].src = \'detAndetBilledeEfter.gif\';

function setImgs(number){
for (i=0;i<document.images.length;i++)
  if (i=number)document.images[i].src=slutimg[i].src;
  else document.images[i].src=startimg[i].src;
}

</script>

Så indeholder den også en preloader !!

hth
jes

Jamen, det skal ik\' være så meget anderledes:

<a href=\"reparation.html\" onmouseover=\"setImgs(1);\"> <img border=\"0\" id=\"picture\" src=\"Images/reparation.gif\" width=\"92\" height=\"13\"></a>

Cooool, men jeg er stadig ikke helt med. Nu har jeg sat scriptet ind og tilpasset det. Men hvorhenne aktiverer jeg det? Hvordan skal mit <img> tags se ud der hvor knapperne skal være, og hvad med <a href>??? ;o)

Måske kunne det også være interessant at have en funktion, som resatte alle billeder i onLoad:

<body ... onLoad=\'setImgs(77);\'><!-- Tallet skal bare være større end antallet af billeder-->

<a href=\"reparation.html\" onmouseover=\"setImgs(1);\" onClick=\"setImgs(1);\" onmouseout=\"setImgs(77);\"> <img border=\"0\" id=\"picture\" src=\"Images/reparation.gif\" width=\"92\" height=\"13\"></a>

Øhhh, det ser ud til at virke. men kun på en af knapperne. De andre tilter EI fuldkommen så den er låst. Du får lige koden hvis nu det er den som er gal ;o)
<script language=\'Javascript\'>
var startimg = new Array();
startimg[0] = new Image();startimg[0].src = \'Images/produkter.gif\';
startimg[1] = new Image();startimg[1].src = \'Images/reparation.gif\';
startimg[2] = new Image();startimg[2].src = \'Images/kontakt.gif\';
var slutimg = new Array();
slutimg[0] = new Image();slutimg[0].src = \'Images/produkter_v.gif\';
slutimg[1] = new Image();slutimg[1].src = \'Images/reparation_v.gif\';
slutimg[2] = new Image();slutimg[2].src = \'Images/kontakt_v.gif\';


function setImgs(number){
for (i=0;i<document.images.length;i++)
  if (i=number)document.images[i].src=slutimg[i].src;
  else document.images[i].src=startimg[i].src;
}
</script>

</head>
<body background=\"Images/bg_up.gif\" onLoad=\'setImgs(77);\'>
<table border=\"0\" width=\"350\" cellspacing=\"0\" cellpadding=\"0\" height=\"23\">
  <tr>
    <td width=\"20\" valign=\"top\" align=\"left\"></td>
    <td width=\"110\" valign=\"top\" align=\"left\" height=\"23\"><a href=\"produkter.html\" onmouseover=\"setImgs(0);\" onClick=\"setImgs(0);\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a></a></td>
    <td width=\"110\" valign=\"top\" align=\"left\" height=\"23\"><a href=\"reparation.html\" onmouseover=\"setImgs(1);\" onClick=\"setImgs(1);\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/reparation.gif\" width=\"92\" height=\"13\"></a></td>
    <td width=\"110\" valign=\"top\" align=\"left\" height=\"23\"><a href=\"kontakt.html\" onmouseover=\"setImgs(2);\" onClick=\"setImgs(2);\" onmouseout=\"setImgs(77);\"> <img border=\"0\" id=\"picture\" src=\"Images/kontakt.gif\"></a> </td>
  </tr>
</table>

Når jeg kører siden igennem en debugger for jeg fejlen :\" \'document.images[...]\' is null or not an object\" i linie 22 som er linien \"else document.images[i].src=startimg[i].src;\"

Hvilken en virker den på ?

De er hver især forskellige:

den første [0] har dobbelt </a>
den tredje har et id

?

Ups
Undskyld for:
  if (i==number)document.images[i].src=slutimg[i].src

Vi starter jo med nummer 77 ... uff

Det er den sidste som virker. Jeg har opdaget det med id på den. Og har også sat det på de andre (det med dobblet </a> havde jeg ikke lige set, men det er fjernet nu), men det hjalp ikke. Jeg for stadig fejl i linie 22, selvom alle 3 nu skulle være ens i koden!

Sådan, nu kører det, men....
Når jeg klikker på billedet (linket) forsvinder det \"aktive\" billede og \"standard\" billede kommer frem igen. Det var jo ikke meningen, det valgte billede skulle jo gerne blive ved med at blive vist, når den side er fremme på skærmen!!! øv, jeg troede lige ;o)

Jo, men så skal vi jo aktivere den, som var inkluderet i min første udvidede funktion:

<script language=\'Javascript\'>
var startimg = new Array();
startimg[0] = new Image();startimg[0].src = \'Images/produkter.gif\';
startimg[1] = new Image();startimg[1].src = \'Images/reparation.gif\';
startimg[2] = new Image();startimg[2].src = \'Images/kontakt.gif\';
var slutimg = new Array();
slutimg[0] = new Image();slutimg[0].src = \'Images/produkter_v.gif\';
slutimg[1] = new Image();slutimg[1].src = \'Images/reparation_v.gif\';
slutimg[2] = new Image();slutimg[2].src = \'Images/kontakt_v.gif\';
var clicked = new Array(2);for(i=0;i<clicked.length;i++)clicked[i]=false;

function setImgs(number){
for (i=0;i<document.images.length;i++)
  if (i=number)document.images[i].src=slutimg[i].src;
  else {document.images[i].src=startimg[i].src;clicked[i]=false;}
}
</script>


\"><a href=\"produkter.html\" onmouseover=\"setImgs(0);\" onClick=\"setImgs(0);clicked[0]=true;\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a>

Så burde den være der !!

Ups ...
i==number

Desværre, ingen ændring....hmmmm

Logikken har alstå en fejl -- øjeblik ...

Aeh ...

Jeg fik jo ikke taget højde for onMouseOut:

<a href=\"produkter.html\" onmouseover=\"setImgs(0);\" onClick=\"for(i=0;i<clicked.length;i++){clicked[i]=false};}setImgs(0);clicked[0]=true;\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a>

function setImgs(number){
for (i=0;i<document.images.length;i++)
  if (i=number||clicked[i])document.images[i].src=slutimg[i].src;
  else {document.images[i].src=startimg[i].src;}
}

Ja, jeg måtte jo lige foretage nogle (ret avancerede) gymnastiske øvelser med logikken, men denne her skulle have logikke i orden.

mvh
jes

Hmm, syntax error i <a href> linien. Kunne det tænkes at der skulle et par = mere et eller andet sted ;o)???

Næeh en } for meget ;-[

<a href=\"produkter.html\" onmouseover=\"setImgs(0);\" onClick=\"for(i=0;i<clicked.length;i++){clicked[i]=false};setImgs(0);clicked[0]=true;\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a>


Til gengæld har vi efterhånden noget, som jeg vil betragte som en klassiker (i min links-mappe)

Øvv ...

jeg har slet ikke kigget efter hvilket target links havde,

Forudsætningen for at denne slags virkede er jo, at den frame, som oplysningerne er i ikke skifter, så to indgangsvinkler:

Enten sætter du target i dine hrefs, altså:

<a href=\"produkter.html\" target=\"indholdFrame\" onmouseover=\"setImgs(0);\" onClick=\"for(i=0;i<clicked.length;i++){clicked[i]=false};setImgs(0);clicked[0]=true;\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a>

Eller også angiver du på onClick, at det er den anden frame, som skal skifte:

a href=\"#\" onmouseover=\"setImgs(0);\" onClick=\"for(i=0;i<clicked.length;i++){clicked[i]=false};setImgs(0);clicked[0]=true;top.indholdFrame.location.href=\'produkter.html\'\" onmouseout=\"setImgs(77);\"> <img border=\"0\" src=\"Images/produkter.gif\" width=\"92\" height=\"13\"></a>

Møehh ..
At tænke sig, at jeg har tænkt denne ting uden den basale logik -- det kan man ikke la\' gå ?-)

jes

Jamen, nu er den sgu hjemme!
Endnu engang har du redet mig, Jes ;o) Takker.

;-)