login  Naam:   Wachtwoord: 
Registreer je!
 Forum

hover afbeelding in andere div

Offline threedme - 03/10/2006 12:14
Avatar van threedmeNieuw lid Situatie is als volgt: in div1 staat mijn menu in div2 zouden afbeeldingen moeten komen telkens wanneer je een link in het menu hovert. Link1 > afbeelding1 enz... Het lukt me om de afbeeldingen tevoorschijn te toveren, maar deze zijn dan gewoon absoluut geplaatst op de pagina. Ze zouden echter in div2 moeten verschijnen. Ik wens enkel CSS te gebruiken hiervoor (geen javascript dus).

8 antwoorden

Gesponsorde links
Offline CounterForce - 03/10/2006 12:15
Avatar van CounterForce Onbekend amai ,

Dat word nogal moeilijk hoor...

Waarom geen javascript ?
Dat zou al veel gemakkelijker werken.   
Offline Thomas - 03/10/2006 12:29
Avatar van Thomas Moderator Kan volgens mij niet zonder JavaScript, omdat je met onmouseover (event) moet werken, en je met :hover geen images van andere elementen kunt wijzigen lijkt me?
Daarnaast moet je het plaatje op een of andere manier in die andere div veranderen (img.src = ... of div.innerHTML of wat dan ook).

Dit gaat onmogelijk zonder JavaScript lijkt mij...
Offline threedme - 03/10/2006 12:38 (laatste wijziging 03/10/2006 12:43)
Avatar van threedme Nieuw lid Hmm... jullie zijn de kenners, dus ik vrees dat m'n zoektocht hier stopt. Ik stam nog uit het iframe-tijdperk. Sindsdien heb ik geen websites meer gemaakt, maar nu is het dus weer zo ver. Met iframe lukte dit wel, maar als ik het goed begrepen heb wordt dit niet echt meer gebruikt...
Waarom geen JavaScript? Omdat ik hier helemaal nog niet in thuis ben  Misschien wordt het wel eens tijd dat ik me hierin eens ga verdiepen, maar momenteel is de tijdsdruk hiervoor iets te groot vrees ik.
Offline xSc - 03/10/2006 12:53
Avatar van xSc Onbekend threedme, in jouw situatie wordt een element aangepast wanneer er over een ander element gegaan wordt. Binnen CSS is dit dus onmogelijk.

<a href="/" onmouseover="javascript:document.getElementById('jedivid').innerHTML = 'htmlvanjeafbeeldingen';">Test</a>

Maak wel gebruik van preloaders (JavaScript
Offline bosgroen - 03/10/2006 14:03
Avatar van bosgroen Gouden medaille

PHP interesse		 het kan met css,
je image moet dan in een child-element staan van de A, (ieder image als child bij zijn desbetreffende A) bij hover kun je dan dat child-element zichtbaar maken en goed positioneren

<a href="" alt="">Foto1
<div class="hoverdiv"><img src="" /></div>
</a>
<a href="" alt="">Foto2
<div class="hoverdiv"><img src="" /></div>
</a>

.A .hoverdiv{display: none;}
.A:hover .hoverdiv{display: block;position: relative;left: 100px;}

Je moet maar wat css-tutorials gaan opsnuiven voor meer info met betrekking tot een goeie positionering
Offline threedme - 03/10/2006 14:16
Avatar van threedme Nieuw lid @bosgroen: goed positioneren gaat, maar niet binnen een andere div. Dus ik zou inderdaad alles absoluut kunnen maken en zorgen dat de afbeelding op de juiste plaats verschijnt, maar ze zal nooit echt binnen de div verschijnen. Dit vormt en probleem zodra je al je content binnen 1 grote gecentreerde div hebt staan. Zodra je de grootte van je venster dan wijzigt staat de afbeelding niet meer op de juiste plaats. (of mis ik iets in je uitleg?)

@xSc: ik ben dan toch maar wat met java aan het proberen. Bedankt voor je aanzet. Op het eerste zicht lijkt dit te lukken (alvast met tekst)... Nu mijn afbeelding hier nog inkrijgen.
Offline Thomas - 03/10/2006 14:22
Avatar van Thomas Moderator Volgens mij kan een hyperlink geen div overspannen.

Oplossing met JavaScript:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html
  2. 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html>
  5. <head>
  6. <title>imageflip</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <script type="text/javascript">
  9. var images = new Array();
  10. images[0] = new Image();
  11. images[0].src = "0.gif";
  12.  
  13. images[1] = new Image();
  14. images[1].src = "1.gif";
  15.  
  16. images[2] = new Image();
  17. images[2].src = "2.gif";
  18.  
  19. images[3] = new Image();
  20. images[3].src = "3.gif";
  21. // et cetera
  22.  
  23. function flip(id, index)
  24. {
  25. 	var img = document.getElementById(id);
  26. 	img.src = images[index].src;
  27. }
  28. </script>
  29. </head>
  30.  
  31. <body>
  32. <img src="0.gif" id="pic" height="50" width="50" /><br />
  33. <br />
  34. <a href="" onmouseover="flip('pic', 1)" onmouseout="flip('pic', 0)">1</a><br />
  35. <a href="" onmouseover="flip('pic', 2)" onmouseout="flip('pic', 0)">2</a><br />
  36. <a href="" onmouseover="flip('pic', 3)" onmouseout="flip('pic', 0)">3</a><br />
  37. </body>
  38. </html>
Offline threedme - 03/10/2006 14:33 (laatste wijziging 03/10/2006 14:34)
Avatar van threedme Nieuw lid Bedankt voor je hulp FangorN. Ik had het ondertussen zelf al wat zitten uitpluizen en kreeg het aan het werk met hetvolgende stukje code:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="menu">
  2. <li><a class="tekst" href="test_08/" onmouseover="javascript:document.getElementById('preview_01').innerHTML = '<img src=afbeeldingen/test_01.jpg></img>';" onmouseout="javascript:document.getElementById('preview_01').innerHTML = '';">.08</a></li>
  3. </div>


Jou versie lijkt op het eerste zicht hetzelfde, maar overzichtelijker.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.21s