(DreamW) Thumbnail linken naar layer. Mogelijk? - Softwareontwikkeling

zaterdag 7 december 2002 12:53

Acties:

Topicstarter

Ik moet een website bouwen voor school en nu leek het me een leuk idee om een soort van interface te maken.

Afbeeldingslocatie: http://home.wanadoo.nl/mvdeng/plaatjes/interface.gif

Afbeeldingslocatie: http://home.wanadoo.nl/mvdeng/plaatjes/interface.gif

Nu wil ik in het rechter ballontje thumbnailed pictures zetten. Maar die moeten gelinkt worden naar het linker rondje voor de uitvergrootte versie.

Maar hoe doe ik dat? De thumbnailed plaatjes zet ik er in m.b.v. layers. Ik heb alleen geen idee hoe ik ze uitvegroot krijg in het linkerrondje.

Ik dacht eerst ook daar een layer neer te zetten en de thumbnails te linken naar die layer alleen werkt dat niet, alle gelinkte plaatjes worden of in een eigen pagina geopend of, als ik het anders instel, in de bron van het document geopend. Daar schiet ik natuurlijk niets mee op.

Weet iemand hier een oplossing voor het linken naar een layer, of is dat uberhaupt niet mogelijk en moet ik het anders oplossen?

zaterdag 7 december 2002 13:01

Acties:

crisp

Devver

Pixelated

Zet in je linker layer alvast een plaatje met een id:

HTML:

1	<div>[img]"transparent.gif"[/img]</div>

wijzigen doe je dan eenvoudig mbv:

JavaScript:

1	document.images['hetPlaatje'].src = 'eenanderplaatje.jpg';

Intentionally left blank

zaterdag 7 december 2002 13:20

Acties:

vleppyniles

Topicstarter

Lukt me (nog) niet.

Dus wat ik doe is dit.

1) Ik open een nieuwe layer en prop daar een thumbnail in.
2) Ik open een nieuwe layer.
3) Ik maak een link aan in de eerste layer die verwijst naar een plaatje. Ik heb nog nergens kunnen vinden om die verwijzing te laten plaats vinden naar die linke layer
4)

en dan stap 4 is me een beetje onduidelijk.

Ik heb de html source bekeken van de tweede (linkerlayer) en aangepast met de eerste 1e regel van je maar dat mag niet baten want ik krijg het plaatje al te zien zonder dat ik op de thumbnail heb gedrukt. En het is me nog steeds een beetje onduidelijk hoe die thumbnail nu moet weten in welke layer hij geopend moet worden...

zaterdag 7 december 2002 15:30

Acties:

teacher

Frontpage Admin / Global Moderator

Dysgaf!

Ok.. je hebt twee layers:
1. daar waar alle thumbnails instaan (dus rechts)
2. daar waar de grote plaatjes inkomen

In de eerste div gebruik je de tweede code van crisp (waarmee je wijzigt)
In de tweede div gebruik je de eerste code van crisp.

en hoe maak je die link dan?

code:

1	< a href="#" onclick="hier_de_code_van_crisp">linkplaatje</a>

t.

Wise enough to play the fool

zaterdag 7 december 2002 16:37

Acties:

crisp

Devver

Pixelated

Een andere manier is werken met innerHTML; daarmee kan je zeg maar in je 2e layer schrijven:

JavaScript:

1	document.getElementById('layer2').innerHTML = '[img]"plaatje.jpg"[/img]';

Nadeel is dat Opera 6 geen innerHTML ondersteund.
Ik zou er sowieso een functie van maken, en dan in je onclick de naam van het plaatje als parameter meegeven

Intentionally left blank

zondag 8 december 2002 18:48

Acties:

vleppyniles

Topicstarter

Ten eerste bedankt voor de reacties, echter het lukt me nog niet.

Om eerst even te stoeien met de layers heb ik nog geen achtergrond en dergelijke gebruikt, zodat het puur en alleen om die layers gaat.

code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<div id="Layer1" style="position:absolute; width:400px; height:400px; 
z-index:1; left: 28px; top: 108px"> 
  <div>[img]"transparent.gif"[/img]</div>
</div>

<div id="Layer2" document.images['hetPlaatje'].src = 'eenanderplaatje.jpg';
 style="position:absolute; width:200px; height:200px; z-index:2; left: 451px; top: 382px"> 
  
</div>

</body>
</html>

Oke, ik ben nu zo"ver". En alles wat ik hierna probeer eindigt in ellende. Even een opsomming van de dingen die ik nog niet helemaal begrijp.

1) Ik weet niet helemaal zeker of ik de tweede regel van Crisp (document.images['hetPlaatje'].src = 'eenanderplaatje.jpg';) goed neer heb gezet. Misschien moet die wel ergens anders.

2) Die laatste code bij "eenanderplaatje.jpg" moet daar het pad staan van dat andere plaatje of...

3) Het linken is me nog niet helemaal duidelijk < a href="#" onclick="hier_de_code_van_crisp">linkplaatje</a>
waar moet die regel staan en hoe moet die eruit zien als ik bijvoorbeeld een thumbnail in c:\photoshop\tvp.gif wil linken naar zijn grote broer c:\photoshop\grotebroer.jpg

Hoe nu verder? Hoe moet die code eruit zien wil het werken?

zondag 8 december 2002 19:34

Acties:

teacher

Frontpage Admin / Global Moderator

Dysgaf!

Wat zou ik bedoelen met : < a href="#" onclick="hier_de_code_van_crisp">linkplaatje</a>???
ik mis dus je onclick event....

bekijk dit:

code:

<div id="Layer1" style="position:absolute; width:400px; height:400px; 
z-index:1; left: 28px; top: 108px"> 
  <div>[img]"http://images.tweakers.net/usericons/17616/battles.jpg"[/img]</div>
</div>

<div id="Layer2" style="position:absolute; width:200px; height:200px; z-index:2; left: 451px; top: 382px">  
<a href="#" onclick="document.images['hetPlaatje'].src = 'http://www.crisp.demon.nl/pictures/grolsch.jpg';">blaaaat</a>

offtopic:
@ crisp: sorry voor het leechen

[ Voor 37% gewijzigd door teacher op 08-12-2002 19:37 ]

Wise enough to play the fool

zondag 8 december 2002 21:14

Acties:

vleppyniles

Topicstarter

Hé toppertje Teacher. Fantastisch het doet het! En in plaats van de "statement" Blaat

kan je ook een plaatje toevoegen, dus je thumbnail.

In ieder geval hartstikke bedankt voor je oplossing.

zondag 8 december 2002 21:26

Acties:

teacher

Frontpage Admin / Global Moderator

Dysgaf!

you're welcome

Zie je nu wat je vergat? Als je een javascriptje maakt is het meestal de bedoeling dat je 'em start met een eventhandler (onclick, onblur, onfocus, if cookie isset, etc).

Wise enough to play the fool