HTML - Ladda bild i speciell "frame" - Programmering och digitalt skapande

2007-02-22 21:27

Permalänk

knolpak

Medlem

Plats: Gävle
Registrerad: Maj 2004

●

HTML - Ladda bild i speciell "frame"

Tja!

Kan någon hjälpa mig med följade?:

På en html-sida ska jag ha en rad med (låt oss säga) 8st 50x50pixel stora bilder. Ovanför dessa vill jag ha ett fönster (som en iframe ungefär) där bilderna laddas när jag klickar på dom. Inga ramar, ingen text, utan bara bilder.

Hur får jag bilderna att laddas i denna specifika "frame"? Jag kan ju inte ladda en bild i en iframe, då ska jag sitta och göra en sida för varje bild.

Någon som vet någon lösning eller ett smart script kanske?

/Adde

Visa signatur

Stäng av datorn och rör på er

Rapportera Redigera

Citera flera Citera

2007-02-22 21:51

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Går ganska enkelt att göra i JS om man e lite van. Kolla runt lite på http://mootools.net/, ett bra JS library som kan göra det mesta.

Till exempel kan man ju göra så att när en bild blir klickas på så ändrar ett JS "background"-cssen så att den pekar på bilden.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2007-02-22 22:41

Permalänk

Axel55

Medlem

Plats: Stockholm
Registrerad: Dec 2004

●

Du måste skriva med target="frame.htm" i länkningen, så att den öppnas i rätt fönster.

Det borde fungera, länge sedan jag sysslade med HTML dock. Du kan alltid kika in www.webdesignskolan.se

Visa signatur

www.discrete.se
www.facebook.com/discrete.sweden

Rapportera Redigera

Citera flera Citera

2007-02-23 11:46

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

Knåpade ihop ett litet demo. Ta koden om du vill.
http://sigurdhsson.org/wp-content/Bildtest/

Edit: Snegla lite på cics version också, eftersom min inte fungerar om JS är avstängt (han har PHP-fallback). Cics version kan faila i vissa browsers (dålig JS).
Edit: Uppdaterade koden, använder ett mindre framework och PHP-fallback eftersom cic klagade.

Senast redigerat 2007-02-23 13:19

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2007-02-23 12:41

Permalänk

cic

Medlem

Registrerad: Jan 2005

●

Citat:

Ursprungligen inskrivet av You
Knåpade ihop ett litet demo. Ta koden om du vill.
http://sigurdhsson.org/wp-content/Bildtest/

<!DOCTYPE html>
<title>Demo: Enkelt bildgalleri</title>
<style type="text/css">
body {text-align:center;}
li {display:inline; margin:0 1em;}
</style>
<script type="text/javascript">
function showIMG(imgsrc)
	{
	document.getElementById('galleriimage').src = imgsrc.firstChild.src.replace('-small','');
	return false;
	}
</script>

<img src="<?php echo isset($_GET['img']) ? str_replace(array('/', '\\\\\\'), '', htmlspecialchars($_GET['img'])) . '.jpg' : 'empty.png'; ?>" alt="" id="bigimage">

<ul>
	<li><a href="?img=power" onclick="javascript:return showIMG(this)"><img src="power-small.jpg" alt=""></a>
	<li><a href="?img=cam" onclick="javascript:return showIMG(this)"><img src="cam-small.jpg" alt=""></a>
	<li><a href="?img=italy" onclick="javascript:return showIMG(this)"><img src="italy-small.jpg" alt=""></a>
</ul>

<p>Kräver <strong>inte</strong> mootools med "Elements". Kräver inte heller <abbr>JS</abbr>.</p>

edit: Gillar hur forumet delar på java script ...

edit2: Om det är GetElementById du tänker på så är det ingen större risk.

edit3: Fixa litet "säkerhetshål". Var inte meningen att detta skulle vara något fungerade script utan bara ett exempel på hur man skulle gå väga, men men ...

Senast redigerat 2007-02-23 13:22

Visa signatur

Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.

Rapportera Redigera

Citera flera Citera

2007-02-23 14:08

Permalänk

knolpak

Medlem