Photoshop effect

Status
Niet open voor verdere reacties.
D

dreamweaverfan

Gebruiker
Lid geworden
16 jun 2010
Berichten
226
Ik heb een afbeelding van de kaart en provicies van nederland 'WAUW' lol
Nu wil ik graag zo'n effect dat als je met de cursor over de kaart gaat per provincie van kleur verandert
daar koppel ik dan hotspots aan, die verwijzen naar een anker
dat anker moet ik trouwens ook nog even opzoeken
graag advies
 
Beste

Ik wil als ik met de cursor bijv op Groningen sta dat die zeg maar blauw jkeurt
en op friesland enzovoort
je ziet het wel vaker
Dat voeg ik die afbeelding toe aan dreamweaver
 
Volgens mij moet dat kunnen met een rollover, net zoals hier op helpmij.nl.
Als je over een link gaat, veranderd de kleur of komt er een streep onder de link.
 
De provincie-kiezer

Hoi dreamweaverfan,
Het mooiste zou zijn een css-hover, waardoor de aangewezen provincie een andere kleur krijgt (zoals in de links die Naarling aangaf).
In dit geval treedt er echter een complicatie op, waardoor het niet zo goed op deze manier kan. Bij een css-hover ga je namelijk uit van een link-oppervlak dat per definitie rechthoekig is. Daar zit 'm het probleem: de provincies zijn niet rechthoekig, en ze liggen ook pal naast elkaar. Het is niet mogelijk om de kaart van Nederland zodanig in rechthoekjes te verdelen, dat alle delen van alle provincies goed geraakt worden (bij deze figuur gaat het nog net; met wat kunst- en vliegwerk passen de rechthoekjes nauwsluitend in de figuur).
  • Nu zou je dit misschien kunnen verhelpen door een hele serie goed gepositioneerde rechthoekjes binnen elke provincie neer te zetten, maar dat is een vreselijk karwei.
  • Een voorbeeld van een dergelijke constructie zit in deze testpagina. Daar moet er een soort diagonaal aanklikbaar zijn, en dat is opgelost door er een aantal extra <span>'s tegenaan te gooien, die elk een mini-rechthoekje vormen binnen het gewenste klikbare gebied. Het hele verhaal zit in dit topic.
Ik om er dus op uit, dat het toch een image-map moet worden om de provincies in het gareel te krijgen. Maar bij een image-map zit normaal gesproken geen hover-mogelijkheid om de figuur te kunnen veranderen.
Dan gaan we even abnormaal doen! :d
  • Het kaartje van Nederland in de uitgangspositie wordt als achtergrond-img neergezet.
  • Precies eroverheen komt een transparant gif'je van hetzelfde fomaat, als voorgrond-image.
  • Een voorgrond-img kan een image-map krijgen. Die maken we aan voor alle provincies.
  • Nu komt de truc. Het voorgrond-image (transparant, niks van te zien dus) krijgt een achtergrond-image waar een oplichtende provincie in staat.
  • Met javascript wordt bij de hover over de <area> van die provincie dat achtergrond-plaatje opgeroepen.
  • Om niet heel veel van die hover-provicie plaatjes te krijgen, heb ik ze (samen met het "normaal Nederland" plaatje) in één strook gezet: een deels transparante gif, waarvan telkens een deel wordt gebruikt via de css background-position.
  • Dus toch CSS-hovers! :p
    Dit levert geen wachttijd voor het oplichtende plaatje bij een hover (het complete img is al gedownload), en omdat er minder "http-requests" nodig zijn (aanvragen van de bezoekende pc om een plaatje van de server te downloaden) scheelt het ook aanzienlijk in de snelheid van de pagina zelf.
Dan krijgen we iets als deze testpagina: nl-kaart-met-hover.htm :)
  • Alleen de provincies Groningen, Friesland, Drenthe en Overijssel werken! De rest gaat analoog.
  • Ter illustratie heb ik er een show/hide bij gemaakt voor als je op een provincie klikt: alleen de tekst van de geklikte provincie wordt zichtbaar. Maar je kunt in de <area> link net zo goed met de klik naar een andere pagina laten gaan.
  • Het geheel werkt ook zonder javascript (voor mensen die dat uit hebben staan of die een text-browser gebruiken), dan worden de show/hide teksten altijd zichtbaar (en met klikken in een provincie gaat men meteen naar de tekst van die provincie).
  • Voor de toegankelijkheid is behalve de "onmouseover" ook steeds een "onfocus" attribuut toegevoegd. Hierdoor kunnen mensen die met de Tab-toets door de links op een pagina wandelen (die bv. geen muis kunnen bedienen) toch de oplichtende provincies zien, en er met de Enter-toets naar toe gaan.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Beste CSS Hunter

Wauw wat een tekst
Wat een uitleg !!!
En wat een mooi voorbeeld!
precies wat ik bedoel

Maar snap er weinig van :P

Ik snap dat de gehele code typen teveel werk ik
ik dacht misschien heeft dreamweaver er een tool vor
ik zal wel een circle maken en daar een hotspot omheen maaken dat men daar kan klikken

ECht hartstikke bedankt voor jullie adviezen \\Dreamweaverfan
 
ik zal wel een circle maken en daar een hotspot omheen maken, zodat men daar kan klikken
Klik om te vergroten...
Ja, dat is in ieder geval een goed begin.

Maar een hotspot hoeft niet perse een cirkel te zijn, het kan ook een veelhoek zijn. Met zoveel hoeken als je wilt! Bijvoorbeeld bij Overijssel staat deze veelhoekige hotspot in m'n testpagina:

nl-kaart-hotspots.gif

Het trefwoord voor het maken van een veelhoekige hotspot is poly (van polygoon = veelhoek). Dat zou in het hotspot-venster van Dreamweaver terug te vinden moeten zijn. In de code wordt het shape="poly", en daarachter komen dan de coördinaten te staan van de punten die je ingeklikt hebt in de ontwerpweergave.
  • Tip: als je een nauwkeurige hotspot wilt maken, zet dan je beeldscherm op een resolutie van 800x600px.
    Dan wordt alles groter, en kan je veel makkelijker op de pixels mikken. :)
Met vriendelijke groet,
CSShunter
 
Beste ss Hunter

Hartelijk dank voor uw advies

U weet geloof ik alles wel op webdesign gebied ?

Vraag:

Hoe kun je afbeeldingen in helpmij plaatsen

Nogmaals bedankt

Dreamweaverfan
 
U weet geloof ik alles wel op webdesign gebied ?
Klik om te vergroten...
Nee hoor, er zijn nog heel veel dingen waar ik geen verstand van heb (database-werk en php/mysql en CMS'sen bv.). En wat ik weet komt vooral door veel jaartjes schade & schande. Zo leer je het!
Maar zeg maar je & jij tegen mij.
Dan de vraag:
Hoe kun je afbeeldingen in helpmij plaatsen?
Klik om te vergroten...
Dat kan op 2 manieren:
  1. Als je de afbeelding online hebt staan, kan je 'm direct tonen met het
    insertimage.png
    "plaatje tonen" knopje in de knoppenbalk van een reactie-venstertje. Dan krijg je zo'n plaatje zoals de hotspot-afbeelding in nr. #7 hierboven.
  2. Als je een afbeelding niet online hebt staan, kun je 'm uploaden naar helpmij als bijlage bij een bericht: met de
    attach.png
    "paperclip knop", ook bovenin de knoppenbalk.
De laatste komt er dan zo in:
logodepogo112x92.gif​
Met het
justifycenter.png
"centreren knopje" komt ie ook nog mooi in het midden.

Met vriendelijke groet,
CSShunter
 
Dankje

Bedankt voor die snelle reacties!!


Over centreren gesproken:

Ik ben voor de lol een site aan het maken voor een restaurant hier in de buurt
Nu loop ik tegen een probleem

Dreamweaver kan wel afbeelding naast tekst zetten maar niet <center>
dat moet ik maar regellen met &nbsp;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
-->
</style>
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p><img src="afbeeldingen/title.jpg" width="1170" height="233" /></p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="afbeeldingen/No photo.jpg" width="224" height="225" /></p>
<p><a href="html/menu.html">Menu</a><br />
Gallery<br />
Contact<br />
Guestbook
<br />
Route<br />

</p>
</body>
</html>


Verder ga ik kijken of het me lukt hier een afbeelding te plaatsen

Ik keek net even vlug, maar ik kan kan alleen kiezen voor website?
Ik ga binnenkort de studie php, en java volgen java niet javascript
javascript komt later wel

Vriendelijke groet:

Dreamweaverfan
 
tekst centreren doe je door met CSS text-align:center; toe te passen op het element dat jij wilt centreren. Als je dus bijvoorbeeld alle paragraaf tekst in het midden wilt hebben zou je

p{
text-align:center;
}

gebruiken. Let wel, dat is niet echt een goed idee, grote lappen gecentreerde tekst lezen niet prettig, er is een reden dat boeken en kranten hun tekst uitsmeren over de hele breedte of naar links schuiven.

Overigens zul je bij het bouwen van verreweg de meeste sites sites veel meer hebben aan javascript dan aan java dus het is welicht en goed idee die volgorde om te draaien.

Elementen postioneren door overmatig gebruik van &nbsp; of <br> is overigens geen goed idee, het kan onverwachte effecten hebben bij verschilende browsers/resoluties. Ook daarvoor kun je beter CSS gebruiken.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan