plaatje bij scrollen

Status
Niet open voor verdere reacties.

renzmenz

Gebruiker
Lid geworden
6 feb 2003
Berichten
231
Kan ik met html bereiken dat als je over een plaatje heen scrollt met je muis, dat je dan een grotere versie van datzelfde plaatje ziet verschijnen? Net als je soms zo'n geel vakje met tekst ziet verschijnen, maar dan een plaatje..... Of dat je bijvoorbeeld een rij met kleine thumbs hebt en als je daar overheen srollt, dat je dan daarnaast de grotere afbeelding ziet, maar dans teeds op dezelfde plek, onafhankelijk van waar het kleine plaatje zich bevindt..

Beetje duidelijk waar ik heen wil?:rolleyes:
 
Beetje duidelijk waar ik heen wil?
Redelijk:rolleyes: , maar het is waarschijnlijk niet mogelijk.

Nooit gezien/gehoord/gelzen.
Je kunt alleen met de klik van je muis en met een mouseover werken in HTML.
 
Ik quote: "Het enige wat ik kan vinden is hoe je een slideshow maakt op een nieuwe laag die meegaat als je naar onder scrollt, maar dat heb ik niet nodig.."

Enne... wat is dat precies? En hoe doe je dat dan??:D
 
Dat weet ik niet meer, maar hetgeen waar Peter Vazed op wijst is toch ook hetgeen dat jij zoekt, niet?
 
Ja, maar het is iets te ingewikkeld voor mij....:o Ik kan dat nooit naar hartelust toepassen op mijn eigen site...
 
Met een heel eenvoudig javascriptje en een paar onMouseOver= en onMouseOut= instructies bij de afbeeldingen kan je bereiken hetgeen jij wil.
Ik heb in bijlage een simpele opbouw gedaan van een webpagina waarop aan de linkerkant 4 foto's van kwelende schoonheden staan en aan de rechterkant een grote leegte.
Als je met de muis over de foto's links gaat verschijnt dezelfde foto aan de rechterkant een paar maten groter. Haal je de muis van de foto weg dan verdwijnt de foto aan de rechterkant ook weer. Wil je dat de foto blijft staan, dan verwijder je gewoon de instructie onMouseOut="WisselAfbeelding('leeg.jpg')" uit de img tags.
Ik heb een tabelletje gebruikt voor de layout, om het eenvoudig te houden, maar je kan ook met frames of css werken voor je schermopbouw.
Het geheel dient enkel om het princiepe uit te leggen.
 

Bijlagen

Wat doe ik fout?
  1. Belangrijk! Je hebt vergeten het javascriptje mee over te nemen in de <head>...</head> sectie van je webpagina.
  2. Je hebt de lege afbeelding niet overgenomen. Voor deze lege afbeelding kan je echter best een gif gebruiken die volledig transparant is. In mijn voorbeeld was dat een jpg, maar dat kon omdat de achtergrond toch wit was.
Nog een tip: als je de kleine afbeeldingen uit thumbnails haalt en je geeft ze op je webpagina een vaste grootte, maak dan de thumnails ook diezelfde vaste grootte, dan zijn de afbeeldingen mooier afgelijnd op je webpagina. Als je ze kleiner maakt en dan vergroot weergeeft worden ze vervormd door een mosaiek effect.

Als bijlage jouw pagina aangepast... :thumb:
 

Bijlagen

(er is even een vakantie tussendoor gekomen, dus wat late reactie)

Het gaat op mijn site om veel plaatjes, als ik hem zo toepas, dan scroll ik over een plaatje heen en dan zie ik hem niet omdat hij heel ver naar beneden pas wordt weergegeven. Ik dacht toen zelf: dan verdeel ik de tabel in kleinere stukjes, per plaatje een tabelletje, zodat de weergave altijd pal naast het plaatje komt als ik er overheen 'mouse'...

maar dat werkt niet:o

Dit is ongeveer hoe ik het oplos (maar dan zie ik geen plaatje meer als ik er overheen mouse):

<HTML>
<HEAD>
<TITLE>RenZ CreationZ - Kaarten</TITLE>
<!-- vervaldatum in het verleden. Zo wordt de pagina altijd correct vernieuwd -->
<meta http-equiv="expires" content="Sat, 1 Jan 2000 07:19:34 GMT">
<script type="text/javascript">
<!-- Begin
function WisselAfbeelding(afbeelding) {
document.GroteAfbeelding.src = afbeelding
}
// End -->
</script>
</HEAD>

<BODY BGCOLOR="#CCFFBF">
<CENTER><FONT COLOR="#73BF60" FACE="ARIAL" SIZE="5">Kaarten</FONT></CENTER>
<CENTER><FONT COLOR="#73BF60" FACE="ARIAL" SIZE="2">(scroll over een plaatje voor een grotere afbeelding)</FONT></CENTER>
<p>
<CENTER><FONT COLOR="#73BF60" FACE="ARIAL" SIZE="4">Verjaardagskaarten</FONT></CENTER>
<HR WIDTH=100% SIZE=1>
<p>
<div align="center">
<table width='100%'>
<tr>
<td valign=middle width="20%">

<img height=100 src="./thumbs/schoonma 50.jpg" onMouseOver="WisselAfbeelding('schoonma 50.jpg')" onMouseOut="WisselAfbeelding('leeg.gif')"><br>
<br>
</td>
<td valign=middle align=center width="80%">
<img height=300 src="leeg.gif" name="GroteAfbeelding" border="0">
</td>
</tr>
</table>

<table width='100%'>
<tr>
<td valign=middle width="20%">
<img height=100 src="./thumbs/hanke wordt 20.jpg" onMouseOver="WisselAfbeelding('hanke wordt 20.jpg')" onMouseOut="WisselAfbeelding('leeg.gif')"><br>
<br>

</td>
<td valign=middle align=center width="80%">
<img height=300 src="leeg.gif" name="GroteAfbeelding" border="0">
</td>
</tr>
</table>
</div>
</BODY>
</HTML>


:confused:
 
Hoeveel afbeeldingen heb je waarover je met de muis wil gaan? Als dat er veel zijn kan je misschien beter gebruik maken van frames of css voor de opbouw van je pagina.
Als je met frames werkt kan je bijvoorbeeld in een vertikaal frame aan de linkerkant een tabel zetten met de afbeeldingen waardoor je kan scrollen met een scrollbalk en in een frame aan de rechterzijde de grote afbeelding tonen.
Ik zie ook dat je de grote afbeelding vertikaal in het midden plaatst:
Code:
...valign=middle...
Als je hem helemaal bovenaan wil vervang je dat door:
Code:
...valign=top...
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan