Skapa snygg sida med thumbnails?

2003-11-06, 22:24 #1

Bannlyst

Jag skulle vilja ha lite hjälp från någon HTML-kunnig person. Jag vet inte om denna fråga hör hemma i programmerings-forumet eller inte, men jag provar här.

Jag vill skapa en sida där jag lägger upp bilder på ett speciellt sätt. Om ni kollar på http://www.eklettica.com/ och klickar på "Artworks" så förstår ni hur jag menar. Snygga, enkla frames och sen thumbnails snyggt uppradade.

Är det någon som har ett litet kodexempel, eller tips på någon sida på nätet som kan vara till hjälp? Måste jag skapa en tabell och lägga thumbnailsen i den, eller?

Och hur gör jag om jag vill att en thumbnail skall gå från svart-vit till färg när man för musen över den? Använda MouseOver?

Hur jag får bilden att öppnas i ett nytt fönster när man klickar på en thumbnail ska jag nog lyckas hitta själv, vet att jag gjort det i JavaScript förut.

Ursäkta min okunskap, men jag har inte programmerat HTML på en tre-fyra år nu, och det var inte som att cykla

Citera

2003-11-06, 23:05 #2

Medlem

Reg: Okt 2003

Inlägg: 7

Det lättaste sättet för att sätta in tumnaglar på din sida tycker jag är att göra tabeller... Då bör du följa följande kod:

Kod:

<html>
<head>
<title>Titel</title>
</head>
<body bgcolor="#ffffff">
<h1>Header</h1>
<table cellpadding="2" border="0">
<tr>
<td align="center" valign="bottom" width="125"><!-- Länk-koden</td>
<td align="center" valign="bottom" width="125"><!-- Länk-koden</td>
<td align="center" valign="bottom" width="125"><!-- Länk-koden</td>
</tr>
</table>

Denna kod skapar en tabell med tre celler. Vari du kan placera dina olika bilder.
För att sedan visa dessa bilder kan du använda dig utav en mängd olika metoder; t.e.x att du länkar till bilderna som sedan öppnas i _blank, men du kan även göra så att de öppnas i en pop-up med hjälp av följande kod.
Kopiera detta till <head>

Kod:

<script language="JavaScript">
<!--
function doNothing(){} 
function popUp(winFile, winWidth, winHeight) { 
window.open(winFile, '', 'width=' + winWidth + ',height=' + winHeight); } 
// --> 
</script>

och detta till <body>:

Kod:

<a href="javascript: void doNothing()" onClick="popUp('filen som skall visas i pop-upen', 600, 400)"><img src="tumnageln.jpg" border="0"></a>

Sen ska dina tumnaglar funka perfekt..

För att lösa ditt svart-vit problem så är det enkla svaret: ja, du ska använda dig utav mouseover.
Detta skall läggas i <head>:

Kod:

<script language="JavaScript">

image1 = new Image();
image1.src = "Url:en till färgbilden";

<!--Sedan kan du lägga till flera image2.src, image 3.src --!>

</script>

Och när bilden ska ändras från svart-vit till färg, ska du lägga till följande sträng för att du ska få mouseover:

Kod:

<a href="link url"
onmouseover="image1.src='musöver bild url';"
onmouseout="image1.src='mus borta bild url';">

<img src="mouseoff picture url'"
border="0" name="bild1">
</a>

Puh.. Det blev mycket text, men jag hoppas att det fixar sig för dig..
Lycka till!

Citera

2003-11-06, 23:33 #3

Bannlyst

Wow! Tack så hemskt mycket för exemplen, nu ska här programmeras! Notepad, here I come...

Citera

2003-11-07, 09:40 #4

Medlem

Reg: Okt 2003

Inlägg: 7

No prob...

Säg bara till om det är något.

Citera

2003-11-16, 12:35 #5

Medlem

Reg: Jul 2003

Inlägg: 2 214

Här finns det också:

http://www.phpsidan.nu/?page=skripts...594e8d7fe792e4

Citera

Skapa snygg sida med thumbnails?

Skapa ett konto eller logga in för att kommentera

Skapa ett konto

Logga in