Knop met link boven een afbeelding laten komen

Pagina: 1
Acties:

  • LittleWan
  • Registratie: Februari 2003
  • Laatst online: 11-11 15:33
Beste,

Ik ben een site aan het maken waar ik mijn foto's wil op tonen. Een soort gallery. Nu had ik gedacht om door de foto's te scrollen een link met volgende en vorige te voorzien. Ik had het graag zo gehad dat wanneer ik over de linkse helft van mijn foto kom met de muis de link naar de vorige foto wijst, en wanneer ik over de rechtse helft van de foto hover, de link naar de volgende foto wijst. (Op die manier kan ik mijn foto maximaal groot maken doordat ik niets rond de foto moet plaatsen om te linken)

Hoe kan ik dit het beste oplossen. Ik vermoed dat dit met JavaScript zal moeten oplossen, maar ik heb geen idee welke termen ik moet gebruiken om een goede zoek actie te bekomen. Heeft hier iemand ervaring mee?
Wie kan mij helpen?

alvast bedankt

( :s oei slechte titel gekozen )

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl


  • gitaarwerk
  • Registratie: Augustus 2001
  • Niet online

gitaarwerk

Plays piano,…

je kan he top meerdere manieren oplossen, met CSS, Javascript.. beide, php etc etc.
Persoonlijk vind ik dit best een aardig script. Erg mooi ook. En qua interactie/regeltjes blahblah, is het ook nog wel aardig :)

http://www.cssplay.co.uk/menu/menu_gallery.html#nogo

Ik denk dat als het voor jezelf is en niet-commercieel dat je het zo kan gebruiken. Maar moet je effe lezen wat zijn voorwaarden o.i.d. zijn.

Success!

Ontwikkelaar van NPM library Gleamy


  • Onbekend
  • Registratie: Juni 2005
  • Laatst online: 18:27

Onbekend

...

Ik denk dat je het beste div's kan gebruiken. Deze maak je transparant over je afbeelding.
In je <div> zet je
onmouseover -> cursor pointer.
onclick -> de link.

Speel ook Balls Connect en Repeat


  • Kanarie
  • Registratie: Oktober 2000
  • Laatst online: 01-12 23:44

Kanarie

תֹ֙הוּ֙ וָבֹ֔הוּ

LittleWan schreef op donderdag 28 december 2006 @ 17:15:
Beste,

Ik ben een site aan het maken waar ik mijn foto's wil op tonen. Een soort gallery. Nu had ik gedacht om door de foto's te scrollen een link met volgende en vorige te voorzien. Ik had het graag zo gehad dat wanneer ik over de linkse helft van mijn foto kom met de muis de link naar de vorige foto wijst, en wanneer ik over de rechtse helft van de foto hover, de link naar de volgende foto wijst. (Op die manier kan ik mijn foto maximaal groot maken doordat ik niets rond de foto moet plaatsen om te linken)

Hoe kan ik dit het beste oplossen. Ik vermoed dat dit met JavaScript zal moeten oplossen, maar ik heb geen idee welke termen ik moet gebruiken om een goede zoek actie te bekomen. Heeft hier iemand ervaring mee?
Wie kan mij helpen?

alvast bedankt

( :s oei slechte titel gekozen )
Daar heb je een mooi stukje javascript voor dat er ook nog eens heel gelikt uitziet: http://www.huddletogether.com/projects/lightbox2/

We're trapped in the belly of this horrible machine. And the machine is bleeding to death.


  • LittleWan
  • Registratie: Februari 2003
  • Laatst online: 11-11 15:33
Ook onbekend schreef op donderdag 28 december 2006 @ 17:21:
Ik denk dat je het beste div's kan gebruiken. Deze maak je transparant over je afbeelding.
In je <div> zet je
onmouseover -> cursor pointer.
onclick -> de link.
hiernaar ben ik op zoek. De kant en klare scripten bieden niet wat ik juist zoek.
hoe ga je juist die transparante divs plaatsen 'over' de afbeelding? een links en een rechts. en hoe laat ik die dynamisch werken? want niet elke afbeelding heeft dezeflde verhoudingen en grootte.

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl


  • Isnowiz
  • Registratie: Mei 2005
  • Laatst online: 16-09 11:42
Met <map> en <area> zou je dat kunnen bereiken...
Alleen heb je wel JavaScript nodig om het midden te bepalen en de hoogte/breedte van je foto...

  • stuiffer13
  • Registratie: September 2004
  • Laatst online: 17-04-2024
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" style="position:absolute;cursor:pointer;">
<tr><td width="50%" onclick="prevImage();"></td><td width="50%" onclick="nextImage();"></td></td>
</table>

Iets in deze geest zou ook moeten werken, de "z-index" van de tabel moet wel boven die van je afbeeldingen liggen zodat hij niet achter je afbeeldingen valt.

  • LittleWan
  • Registratie: Februari 2003
  • Laatst online: 11-11 15:33
http://www.couloir.org/

hier zie het hoe ik het bedoel.
Ik heb het al eens vlug bekekent, maar het is te ingewikkeld, en ik wil het iets eenvoudiger. Misschien weet iemand hoe zoiets basisprincipe werkt. Ik ken te weinig van javascript op deze moment, maar ik zou het wel nog willen leren.

http://www.sillevl.be - blog http://www.sillevl.be/blog - flickr http://www.flickr.com/sillevl

Pagina: 1