Vise billed ovenpå et andet

Følgende kunne meget vel gøre tricket:
--------------------------------------
<script type="text/javascript" language="javascript">
function ShowSmall(o){
  var oLarge=document.getElementById(o.getAttribute("id")+"large");
  oLarge.style.position="absolute";
  oLarge.style.left=o.offsetLeft+o.offsetWidth-(oLarge.offsetWidth/2)+"px";
  oLarge.style.top=o.offsetTop+o.offsetHeight-(oLarge.offsetHeight/2)+"px";
  oLarge.style.display="inline"
}
function HideSmall(o){
  document.getElementById(o.getAttribute("id")+"large").style.display="none"
}
</script>

<a href='link.html'><img id='1' src='pic.jpg'></a>
<img id='1large' style='display:none;cursor:pointer' src='pic2.jpg' onclick='window.location.href="url.htm"'>

w13> Hvad er der galt med disse to ID'er...? :-)

id='1'

id='1large'

<ole>

En id må ikke begynde med et tal

/mvh
</bole>

Udover at de starter på tal, hvilket er enormt ulovligt? :P

Jeg ser 95% af alle spørgere navngive id'er sådan, og gider snart ikke nævne det længere. =) Men vi kan jo håbe på, at browserne holder op med at tolke det, som korrekt.

Tænk hvor meget, det kunne gøre for webudvikleres vaner, hvis IE tog sig sammen og f.eks. bare lavede nogle advarsler, der fortalte folk om deres skodkoder. :P Så ville de vel lytte til det og holde op med at kode skidt.

Ah, der var du hurtigere. =)

w13:
Jeg går ud fra at du vil have en onMouseOver og onMouseOut på billedet ;-)

Hvis jeg laver de 2 billeder og links som nedenstående, så bliver det lille billede vist som det skal, men linket virker ikke efter hensigten. Når man flytter musen hen over det lille billed skifter angivelsen af linket (nederst i browseren) hele tiden mellem link.html og link2.html. Desuden sker der ikke rigtigt noget når man trykker på linket. Tryk på det store billed virker som det skal.

<a href='link.html'><img id='ID1' src='pic.jpg' onMouseOver='java script:ShowSmall(this);' onMouseOut='java script:HideSmall(this);' border='0'></a>
<a href='link2.html'><img id='ID1large' style='display:none;cursor:pointer' src='pic2.jpg' height='20' border='0'></a>

Det andet problem er, at der går ged i koden når der vises flere billeder og specielt når de er placeret i en tabel. Så vises de små billeder et forkert sted på siden og altid samme sted ligemeget hvilket billede man har bevæget musen hen over. Koden er som følgende:

<TABLE cellspacing="7" cellpadding="0" border="0" id="table2" align="center">
    <TR>
        <TD valign="top" align="left">
        <A href='link1'><IMG src='pic.gif' border='0' id='ID1' width='220' height='165' onMouseOver='java script:ShowSmall(this);' onMouseOut='java script:HideSmall(this);'></A>
        <A href='link2.html'><IMG id='ID1large' style='display:none;cursor:pointer' src='pic2.gif' height='20' border='0'></A>
        </TD>
        <TD valign="top" align="left">
        <A href='link3'><IMG src='pic2.gif' border='0' id='ID2' width='220' height='165' onMouseOver='java script:ShowSmall(this);' onMouseOut='java script:HideSmall(this);'></A>
        <A href='link4.html'><IMG id='ID2large' style='display:none;cursor:pointer' src='pic2.gif' height='20' border='0'></A>
        </TD>
    </TR>
</TABLE>

Hrm, jeg ville nok tænke i sådan noget:

<script type="text/javascript">
var actPic = null;
function showSmallLink(elm){
  actPic = elm.parentNode.getElementsByTagName("img")[1];
  actPic.style.display = "block";
}
function hideSmallLink(elm){
  if(actPic && actPic == elm.parentNode.getElementsByTagName("img")[1])
    setTimeout("actPic.style.display='none';",150);
}
</script>

<div style="position:relative;">
  <img src="detStoreBillede.gif" onmouseover="showSmallLink(this);" onmouseout="hideSmallLink(this);">
  <img src="detLilleOverlay.gif" style="width:40px;height:30px;position:absolute;bottom:0;right:0;display:none;">
</div>

Hov, jeg glemte linket:

<div style="position:relative;">
  <img src="detStoreBillede.gif" onmouseover="showSmallLink(this);" onmouseout="hideSmallLink(this);">
  <img src="detLilleOverlay.gif" style="width:40px;height:30px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';">
</div>

roenving:

Jeg får følgende fejl:
actPic.style er null eller ikke et objekt (linje 5)

Har du sørget for det omkransende element (som er essentielt i mit eksempel ?-)

-- måske kan du lave et eksempel, du kan linke til, så vi kan prøve at hjælpe med debuggingen ?o]

Det virker hos mig:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript" language="javascript">
function ShowSmall(o){
  var oLarge=document.getElementById(o.getAttribute("id")+"large");
  oLarge.style.position="absolute";
  oLarge.style.display="inline";
  oLarge.style.left=o.offsetLeft+o.offsetWidth-(oLarge.offsetWidth)+"px";
  oLarge.style.top=o.offsetTop+o.offsetHeight-(oLarge.offsetHeight)+"px"
}
function HideSmall(o){
  document.getElementById(o.getAttribute("id")+"large").style.display="none"
}
</script>

<a href='link.html'><img id='pic1' src='pic.jpg' onmouseover='ShowSmall(this)' onmouseout='HideSmall(this)' width='300' height='400'></a>
<a id='pic1large' style='display:none' href='url.htm'><img src='pic2.jpg' onmouseover='ShowSmall(document.getElementById(this.parentNode.getAttribute("id").replace("large","")))'></a><br>

<a href='link.html'><img id='pic2' src='pic.jpg' onmouseover='ShowSmall(this)' onmouseout='HideSmall(this)' width='300' height='400'></a>
<a id='pic2large' style='display:none' href='url.htm'><img src='pic2.jpg' onmouseover='ShowSmall(document.getElementById(this.parentNode.getAttribute("id").replace("large","")))'></a>

</body>
</html>

Bemærk dog, at der ingen idé er i, at skrive "java script:" inden i en event handler (onclick, onmouseover, osv.), da disse som standard _er_ javascript.

w13:

Kan se at det virker, men kun hvis billederne ikke er vist i en tabel:
<TABLE cellspacing="7" cellpadding="0" border="0" id="table2" align="center">
    <TR>
        <TD valign="top" align="left">
            <a href='link.html'><img id='pic1' src='images/FileZilla1.jpg' onmouseover='ShowSmall(this)' onmouseout='HideSmall(this)' width='300' height='400'></a>
            <a id='pic1large' style='display:none' href='url.htm'><img src='images/Annuller.png' onmouseover='ShowSmall(document.getElementById(this.parentNode.getAttribute("id").replace("large","")))'></a><br>
        </TD>
        <TD valign="top" align="left">
            <a href='link.html'><img id='pic2' src='images/Index_14.gif' onmouseover='ShowSmall(this)' onmouseout='HideSmall(this)' width='300' height='400'></a>
            <a id='pic2large' style='display:none' href='url.htm'><img src='images/Annuller.png' onmouseover='ShowSmall(document.getElementById(this.parentNode.getAttribute("id").replace("large","")))'></a>
        </TD>
    </TR>
</TABLE>

roenving:

Jeg afvikler pt. koden lokalt på computeren. Min fulde kode er:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript">
var actPic = null;
function showSmallLink(elm){
  actPic = elm.parentNode.getElementsByTagName("img")[1];
  actPic.style.display = "block";
}
function hideSmallLink(elm){
  if(actPic && actPic == elm.parentNode.getElementsByTagName("img")[1])
    setTimeout("actPic.style.display='none';",150);
}
</script>

<div style="position:relative;">
  <a href='link1.html'><img src="pic1.jpg" onmouseover="showSmallLink(this);" onmouseout="hideSmallLink(this);"></a>
  <img src="pic2" style="position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';">
</div>

</body>
</html>

Du har jo sat et ekstra omkransende element ind, det skal der selvfølgelig tages højde for !-)

-- kan du ikke lave link på det store ligesom du gør med det lille:

<div style="position:relative;">
  <img src="pic1.jpg" onmouseover="showSmallLink(this);" onmouseout="hideSmallLink(this);" onclick="location.href='link1.html';" style="cursor:pointer;">
  <img src="pic2" style="position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';">
</div>

-- og en virkende udgave kunne f.eks. se således ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript">
var actPic = null;
function showSmallLink(elm){
  actPic = elm.parentNode.getElementsByTagName("img")[1];
  actPic.style.display = "block";
}
function hideSmallLink(elm){
  if(actPic && actPic == elm.parentNode.getElementsByTagName("img")[1])
    setTimeout("actPic.style.display='none';",500);
}
</script>

<div style="width:400px;height:300px;position:relative;">
  <img src="pic1.jpg" onmouseover="showSmallLink(this);" onmouseout="hideSmallLink(this);" onclick="location.href='link1.html';" style="width:400px;height:300px;cursor:pointer;">
  <img src="pic2" style="width:40px;height:30px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';">
</div>

</body>
</html>

roenving:
Sorry, havde glemt at jeg havde prøvet med en <a> tag omkring billedet. Anyway, dit eksempel ovenfor er lidt underligt. Når jeg flytter musen hen over det lille billed forsvinder det og kommer så frem igen. Desuden er det også lidt tilfældigt om det er muligt at trykke på den og åbne ditLink.html.

Problemet er nok, at der jo nødvendigvis skal være en mouseout på det nederste (store) billede, og det kommer der jo allerede ved hover på det lille, det har jeg forsøgt at klare med en forsinkelse, men det kan også laves mere kompliceret, så der skal være mouseout på både det store og lille billede !-)

Kan se hvad du mener, men det er ikke en god løsning med timeout. Kan du hjælpe med en bedre løsning?

En mulig løsning kunne være:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>

<script type="text/javascript">
var actPic = {},me;
function showSmallLink(elm){
  actPic.pic = elm.parentNode.getElementsByTagName("img")[1];
  actPic.pic.style.display = "block";
  me = elm;
}
function hideSmallLink(elm){
  if(actPic.pic && actPic.pic == elm.parentNode.getElementsByTagName("img")[1] && !actPic.hover)
    actPic.pic.style.display='none';
}
</script>

<div style="width:400px;height:300px;position:relative;">
  <img src="pic1.jpg" onmouseover="showSmallLink(this);" onmouseout="setTimeout('hideSmallLink(me)',20);" onclick="location.href='link1.html';" style="width:400px;height:300px;cursor:pointer;">
  <img src="pic2" style="width:40px;height:30px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';" onmouseover="actPic.hover=true" onmouseout="actPic.hover=false;hideSmallLink(this);">
</div>

</body>
</html>

Super! Kan se at hvis man hurtigt flytter sig mellem 2 billeder, så får den ikke lukket det første lille billede og derfor er det ikke muligt at få vist det lille billede til et andet billed. Eks. ved visning af følgende 4 billeder:
<TABLE cellspacing="7" cellpadding="0" border="0" id="table2" align="center"><TR>
<TD valign="top" align="left">
<div style="width:220px;height:165px;position:relative;">
  <img src="13009.jpg" onmouseover="showSmallLink(this);" onmouseout="setTimeout('hideSmallLink(me)',20);" onclick="location.href='link1.html';" style="width:220px;height:165px;cursor:pointer;">
  <img src="images/Annuller.png" style="width:25px;height:25px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink2.html';" onmouseover="actPic.hover=true" onmouseout="actPic.hover=false;hideSmallLink(this);">
</div>
</TD>
<TD valign="top" align="left">
<div style="width:220px;height:165px;position:relative;">
  <img src="13010.jpg" onmouseover="showSmallLink(this);" onmouseout="setTimeout('hideSmallLink(me)',20);" onclick="location.href='link1.html';" style="width:220px;height:165px;cursor:pointer;">
  <img src="images/Annuller.png" style="width:25px;height:25px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';" onmouseover="actPic.hover=true" onmouseout="actPic.hover=false;hideSmallLink(this);">
</div>
</TD>
</Tr><Tr>
<TD valign="top" align="left">
<div style="width:220px;height:165px;position:relative;">
  <img src="13013.jpg" onmouseover="showSmallLink(this);" onmouseout="setTimeout('hideSmallLink(me)',20);" onclick="location.href='link1.html';" style="width:220px;height:165px;cursor:pointer;">
  <img src="images/Annuller.png" style="width:25px;height:25px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';" onmouseover="actPic.hover=true" onmouseout="actPic.hover=false;hideSmallLink(this);">
</div>
</TD>
<TD valign="top" align="left">
<div style="width:220px;height:165px;position:relative;">
  <img src="13014.jpg" onmouseover="showSmallLink(this);" onmouseout="setTimeout('hideSmallLink(me)',20);" onclick="location.href='link1.html';" style="width:220px;height:165px;cursor:pointer;">
  <img src="images/Annuller.png" style="width:25px;height:25px;position:absolute;bottom:0;right:0;display:none;cursor:pointer;" onclick="location.href='ditLink.html';" onmouseover="actPic.hover=true" onmouseout="actPic.hover=false;hideSmallLink(this);">
</div>
</TD>
</Tr>
</Table>

Glemte også helt at jeg har brug for at have en <a>-tag omkring mit store billed. På det lille er det fint med et onClick kald.

Det sidste jeg meget gerne vil have er, at jeg kan få vist 2 små billeder ved siden af hinanden med forskellige onClick links. Kan dette lade sig gøre?

Tak for din hjælp indtil videre. Den er virkelig værdsat. Håber du gider hjælpe med de sidste ting.

Hvorfor skal du have a-tagget ?-)

-- og ideen med de to billeder kan sikkert løses, men jeg forstår ikke umiddelbart scenariet !-)

Fordi jeg bruger lightbox til at vise billedet når man trykker på det:
http://www.huddletogether.com/projects/lightbox2/

Ideen med 2 billeder er, at jeg ved onMouseover får 2 knapper: en til redigering af billedet og en til sletningen af billedet.

Roenving, hvis det er kompliceret med 2 små billeder, så bare glem det. Det vigtige er at jeg kan a-tagge mit store billed.

Roenvig, smidt et svar så lukker jeg spørgsmålet.

Oki '-)

-- men behold selv langt de fleste af pointene !-)

Samler ikke point, så det gør mig ikke noget. Tak for hjælpen!

-- og så takker jeg for point ;~}