Ga naar inhoud

[CSS] image in box veranderen d.m.v. een link


Aanbevolen berichten

Voorbeeld: [url=http://junk.xanuex.nl/website/preview.htm]Website[/url] Ik heb een aantal vraagjes/problemen m.b.t. de bovenstaande website: 1) Ik wil graag het plaatje HOME ([i:eaab9a85d4]zie plaatje1[/i:eaab9a85d4]) veranderen wanneer ik op een van de knoppen in het menu klik. Nu staat het plaatje in een box welke is vormgegeven in een stylesheet. [list:eaab9a85d4]#maincontent { float: right; margin: 0; padding: 70px 20px 30px 40px; width: 709px; /* box model hack */ voice-family: "\"}\""; voice-family:inherit; width: 689px; border-left: 1px solid #790000; background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; height: 200px; }[/list:u:eaab9a85d4] Ik ben al met javascript bezig geweest maar ik krijg het niet voor elkaar. iemand die me hiermee kan helpen ? 2) Iemand enig idee waarom er een gat in het menu zit en hoe ik dit kan oplossen? ([i:eaab9a85d4]zie plaatje2[/i:eaab9a85d4]) 3) Iemand enig idee hoe ik de balk onderaan in hoogte kan verkorten? Ik heb hem een hoogte van 32px meegegeven maar door het formulier wat erin komt te staan wordt deze hoogte gewoon verlengt wat lelijk staat. [b:eaab9a85d4]Plaatje 1[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout3.gif[/img:eaab9a85d4] [b:eaab9a85d4]Plaatje 2[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout1.gif[/img:eaab9a85d4] [b:eaab9a85d4]Plaatje 3[/b:eaab9a85d4] [img:eaab9a85d4]http://junk.xanuex.nl/website/fout2.gif[/img:eaab9a85d4] alvast bedankt. - marcel
Link naar reactie
Ik denk dat je de pseudo-class a:active moet hebben hiervoor. Dit werkt als een a:focus in IE, maar ik denk dat dit in dit geval niet veel zal uitmaken. Ik denk dat het gat in het plaatje een bug in IE is. Je lijkt al alle margins en paddings op 0 te hebben gezet en in Mozilla ziet iig dat er wel goed uit. Probeer eens een negatieve -margin-top:-4px; voor alleen IE. Ik denk dat die form-tag de oorzaak van die extra hoge onderkant. Om de #footer heen gooien helpt iig al iets. Er gaat nogal wat fout in Mozilla. Check je site daar ook eens in. Ik denk dat dit te maken heeft met je gebruik van float. Ik zou voor dit soort layout eigenlijk geen gebruik maken van float.
Link naar reactie
Voorbeeld: [url=http://junk.xanuex.nl/website/preview.htm]Website[/url] Ik zag idd dat hij in andere browsers niet echt denderend was, dat is nu gefixed als het goed is. enig idee hoe ik dit in die pseudo-class moet aangeven gezien het feit dat het voor iedere knop anders is? Ik was zelf al met javascript aan de gang gegaan maar kom daar ook niet echt uit. Die margins -4 werkt niet, nog meer ideeen? Ziet er niet echt top uit zo al zeg ik het zelf :P ik weet dat de form-tag het probleem is, wilde alleen weten of er een oplossing voor is om die margins eronder niet zo uit te breiden :-?
Link naar reactie
Ik heb nu alleen in IE dat de linker box te klein is, volgens mij werkt die boxmodel-hack niet. [code:1:606a7589b0]#maincontent { float: right; margin: 0; padding: 70px 30px 30px 30px; border-left: 1px solid #790000; background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; color: #000; height: 300px; width: 748px; voice-family: "\"}\""; voice-family:inherit; width: 688px; } html>#maincontent { width: 688px; } [/code:1:606a7589b0] En ik zie in mozilla het plaatje HOME niet.
Link naar reactie
Je moet je site wel opslaan als .php he :D[code:1:a17e191c40]<?php session_start(); define('ROOT_URL', 'http://localhost/project3/website/website/'); include('config.php'); ?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> ... rest site[/code:1:a17e191c40]
Link naar reactie
[code:1:574226e20a] <img src='images/menu/top.gif' alt='' /> <ul id="nav"> <li id='menu_home'> <a href="#home" onClick="changePicure('home');">Home</a></li> <li id='menu_forum'> <a href="#forum" target='_blank' onClick="changePicure('forum');">Forum</a></li> <li id='menu_archief'><a href="#archief" onClick="changePicure('archief');">Archief</a></li> <li id='menu_links'> <a href="#links" onClick="changePicure('links');">Links</a></li> <li id='menu_contact'><a href="#contact" onClick="changePicure('contact');">Contact</a></li> </ul> <img src='images/menu/bottom.gif' alt='' />[/code:1:574226e20a] Het gaat toch om het image, deze staat boven de ul. vind het ook wazig dat hij onderaan wel aansluit en bovenaan niet, dus alleen de top-margin zou dan verkeerd zijn ofzo :S
Link naar reactie
Het zal iets zijn in de trend van[code:1:d62ee2a48e]document.getElementById("menu_home").className = "maincontent";[/code:1:d62ee2a48e]Moet je er alleen even voor zorgen dat je [i:d62ee2a48e]#maincontent[/i:d62ee2a48e] verandert in [i:d62ee2a48e].maincontent[/i:d62ee2a48e] zodat het consistent blijft. - Bas
Link naar reactie
Dit klopt niet:[code:1:7e4e3153b0]<li id='menu_forum'><a href="#forum" onClick='changePicture('menu_forum')'>Forum</a></li>[/code:1:7e4e3153b0]Je moet beter met de quotes werken, het volgende is juist qua syntax:[code:1:7e4e3153b0]<li id='menu_forum'><a href="#forum" onClick='changePicture("menu_forum")'>Forum</a></li>[/code:1:7e4e3153b0]Om dergelijke fouten op te sporen kan ik je trouwens de JavaScript Console van Mozilla aanraden. Redelijk duidelijke foutmelding, inclusief regel en kolom waar deze optreedt. En je kan direct naar de desbetreffende regel in de broncode springen. - Bas
Link naar reactie
is het niet mogelijk om het volgende te doen ? [code:1:ddd92b8c7c] <script language='javascript'> function changePicture(menu) { document.getElementById("maincontent").background="../images/kopteksten/"+menu+".gif"; } </script>[/code:1:ddd92b8c7c] Het plaatje staat namelijk gecentreerd in de box [code:1:ddd92b8c7c]#maincontent { background: #fff url(../images/kopteksten/home.gif) top center fixed no-repeat; }[/code:1:ddd92b8c7c] *zucht* niet gedacht dat het zoveel moeite zou zijn om een plaatje te laten wisselen :(
Link naar reactie
[code:1:9b88b3b248]<script type="text/javascript"> function changePicture(menu) { document.getElementById("maincontent").style.backgroundImage="../images/kopteksten/"+menu+".gif"; } </script>[/code:1:9b88b3b248]Let er even op dat het [i:9b88b3b248]language[/i:9b88b3b248]-attribuut verouderd is en vervangen door [i:9b88b3b248]type[/i:9b88b3b248]. - Bas
Link naar reactie
in IE krijg ik een foutmelding wanneer ik op een knop klik. en plaatjes staan op de server (antwoord: ja) lol :P /* error in IE Line: 30 Error: Invalid Argument [url=http://junk.xanuex.nl/website/images/kopteksten/home.gif]http://junk.xanuex.nl/website/images/kopteksten/home.gif[/url] [url=http://junk.xanuex.nl/website/images/kopteksten/forum.gif]http://junk.xanuex.nl/website/images/kopteksten/forum.gif[/url] [url=http://junk.xanuex.nl/website/images/kopteksten/archief.gif]http://junk.xanuex.nl/website/images/kopteksten/archief.gif[/url] etc
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

  • Populaire leden

    Er is nog niemand die deze week reputatie heeft ontvangen.

  • Leden

    Geen leden om te tonen

×
×
  • Nieuwe aanmaken...