Just nu i M3-nätverket
Jump to content

Thumbnails?


Fletch

Recommended Posts

Jag vill göra thumbnails, så att när man klickar på dem så kommer dem upp på en ny sida som är exakt så stor som bilden är... och den nya sidan ska ha en stäng knapp... Någon som har en aning om hur detta ska gå till???

 

Tack!

 

Link to comment
Share on other sites

Här får du två exempel som jag justerat och anpassat då denna fråga kommer upp då och då, ett med bildpopup (överst) samt ett med mouseover (nedre)

Först själva huvudsidan varifrån du öppnar bildlänken. Du kan ange storlek och position m.m.

 

<HTML>

<HEAD>

<TITLE>POPUP</TITLE>

<script type="text/javascript">

 

function popup(url,width,height){

if (parseInt(navigator.appVersion) >= 3){

if (navigator.appname == "Netscape"&&parseInt(navigator.appVersion)<5){

var tools = new packages.java.awt.toolkit.getdefaulttoolkit();

screen=tools.getscreensize();

}

x = screen.width;

y = screen.height;

}

window.open(url,"popup","top=" + parseInt(y/2-height/2-4) + ",left=" + parseInt(x/2-width/2-4) + ",width=" + width + ",height=" + height);

}

</script>

 

</HEAD>

<BODY BGCOLOR=lightgreen>

<a href="#" onMouseOver="popup('dinbild.htm',300,300); return false;">Bildlänken</a>

 

</BODY>

</HTML>

 

 

 

 

Nedan koden till popupsidan där du lägger din bild som bakgrund. Stängs automatiskt efter vald tid (i detta fall 6 sek)

eller man stänger själv.

 

<HTML>

<HEAD>

<TITLE>popup</TITLE>

 

<SCRIPT>

<!-- Göm skriptet

 

var tiden = 6000;

tid = null;

function slutIgen(){

tid = setTimeout("self.close()",6000);

}

// Sluta gömma -->

</SCRIPT>

 

<BODY onload="slutIgen();self.focus()" background= 001.jpg>

<BR><BR><BR><BR><BR><BR><CENTER>

 

<A HREF="javascript:self.close()"></A>

 

</BODY>

</HTML>

 

 

-------------------------------------------------------

 

Inget popup-ulbum visserligen, men bättre än så!

 

<html>

<head><title>Mina Bilder</title>

</HEAD>

 

<script language="javascript">

<!-- begin

 

if(document.images){

img1=new Image();

img2=new Image();

img3=new Image();

img4=new Image();

img5=new Image();

img6=new Image();

img7=new Image();

img8=new Image();

img9=new Image();

img10=new Image();

img1.src="001.jpg";

img2.src="002.jpg";

img3.src="003.jpg";

img4.src="004.jpg";

img5.src="005.jpg";

img6.src="006.jpg";

img7.src="007.jpg";

img8.src="008.jpg";

img9.src="009.jpg";

img10.src="010.jpg";

}

else{}

//end-->

 

</script>

 

</head>

 

<BODY bgcolor="SILVER">

 

<table style="margin-right:8px" bgcolor =silver width=98% height=98% >

<TD width=98% height=98%>

<p align=center><BR><BR><img name="spotlight" src="001.jpg" border=1 width=70% height=80% >

</TD>

 

<!--

Vill du ha tumbnailen till vänster i stället så lägg första td-taggen direkt efter </TABLE-taggen>

Då får du oskså ändra länkens placering.

-->

 

<td style="padding-left:10px"><table cellpadding=5 cellspacing=5 colspan=2 rowspan=5></td>

<td><a href="#" onMouseOver="document.spotlight.src=img1.src" </a>

<img width=60 height=50 src="001.jpg" >

<td><a href="#" onMouseOver="document.spotlight.src=img2.src" >

<img width=60 height=50 src="002.jpg"></a></td>

<tr><td><a href="#" onMouseOver="document.spotlight.src=img3.src">

<img width=60 height=50 src="003.jpg"></a></td>

<td><a href="#" onMouseOver="document.spotlight.src=img4.src" >

<img width=60 height=50 src="004.jpg"></a></td>

<tr><td><a href="#" onMouseOver="document.spotlight.src=img5.src" >

<img width=60 height=50 src="005.jpg"></a></td>

<td><a href="#" onMouseOver="document.spotlight.src=img6.src" >

<img width=60 height=50 src="006.jpg"></a></td>

<tr><td><a href="#" onMouseOver="document.spotlight.src=img7.src" >

<img width=60 height=50 src="007.jpg"></a></td>

<td><a href="#" onMouseOver="document.spotlight.src=img8.src" >

<img width=60 height=50 src="008.jpg"></a></td>

<tr><td><a href="#" onMouseOver="document.spotlight.src=img9.src" >

<img width=60 height=50 src="009.jpg"></a></td>

<td><a href="#" onMouseOver="document.spotlight.src=img10.src">

<img width=60 height=50 src="010.jpg"></a></td>

</table>

<A HREF=nästa_tio_bilder.htm>Flera bilder > > ></A>

</body>

</html>

 

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...