Vestigingen weergeven

Status
Niet open voor verdere reacties.
Egel007

Egel007

Gebruiker
Lid geworden
4 dec 2007
Berichten
271
Hey,

Ik moet een website voor school maken over een fictief bedrijf (NedTV), dus ben ik eerst aan de gang gegaan met ConTEXT. Aangezien we met frames moesten gaan werken, ben ik overgegaan op Frontpage, want mij ontbreekt nogal wat frames-kennis en ik snap er werkelijk niet veel van. Nu heb ik inmiddels al een redelijk groot gedeelte van de site af, maar ik wilde graag een kaartje van Nederland opzetten met de vestigingen.

Ik wilde het graag zo doen:
Een landkaartje, wat ik gemaakt heb met Photoshop (opgeslagen als .png).
Daarop wil ik dan met Frontpage ronde buttons maken, die op de Nederlandse kaart op de plaatsen van de vestigingen staan, waarop je dan kunt klikken.
Dan wil ik graag dat de adresgegevens zegmaar in zo'n vakje schuinboven de muis verschijnen als je erop klikt (of ingedrukt houdt).
Dus niet dat je dan weer naar een andere pagina gaat met de gegevens.

Dus; hoe doe ik dat? :p

Ik weet niet of het zo een beetje redelijk is uitgelegd, ik weet zo snel geen duidelijkere manier.
Bij voorbaat dank!
 
coördinaten

vrijwel elke webpage editor heeft een optie om op coördinaten een afbeelding te plaatsen en als je dan de info tekst als gegevens laat zien

hieronder code voor de tooltip http://boxover.swazz.org/
 
Dat is inderdaad precies wat ik bedoel!
Bedankt, maar over die coördinaten, dat kan ik niet vinden in Frontpage.
Ik werk pas enkele dagen met dat programma, en kan er nog niet echt wijs uit.

Het enige wat ik nu dus nog niet begrijp is hoe ik de buttons op mijn afbeelding zet, die ik net heb geïmporteerd in de pagina.
 
Heb je ook een emailadres van je leraar voor ons? Aangezien het absoluut schandalig is, dat iemand die ervoor gestudeerd schijnt te hebben, je verteld dat je met frames moet werken...

Ik zou hem wel eens willen spreken...
 
Trouwens nog even on-topic, voor de coördinaten kun je image-editor gebruiken, Photoshop bijvoorbeeld, maar ik geloof dat paint het ook wel kan.

Als je dan nog even op imagemap googlet, moet dat goed komen.
 
Hm, bedankt!
Ik zal het morgen eens proberen!

Overigens, over die leraar. Ik heb eigenlijk geen flauw idee wat zijn e-mailadres is, maar over het algemeen in het de bedoeling dat je zelfstandig moet leren werken en alles zelf oplost. En één van de weinige eisen van de site was dus dat er gebruik werd gemaakt van frames (op welke manier dan ook), en dat heb ik wel voor elkaar gekregen na een aantal uur.

Maar, nogmaals bedankt!
 
Hmm, jammer dat je geen emailadres van 'm hebt.

Maar nogmaals, frames zijn inmiddels zo "deprecated" (weet nog steeds geen goed nederlands woord hiervoor), dat het echt niet zou mogen dat het een eis is dat je ze gebruikt.

Logischer zou zijn dat het een eis is dat je ze niet gebruikt.
 
Misschien wel aardig om aan je 'leraar' te vertellen dat in de komende (en gedeeltelijk al geldige) html 5 frames stomweg helemaal verboden zijn. Kunnen gewoon niet meer gebruikt worden. En worden al jarenlang afgeraden. Jammer dat leerlingen nog steeds met dit soort zinloze opdrachten worden opgescheept.
Misschien kun je 'm even dit topic laten zien en kan hij hier vertellen waarom je frames moet gebruiken?
En als ik toch bezig ben: FrontPage wordt al jaren door de maker, Microsoft, afgeraden. Het maakt vaak code die alleen in Internet Explorer werkt, maar ook in Internet Explorer 8 geeft het problemen.
 
Laatst bewerkt:
Hoi Egel007,
Het onderwerp was geloof ik dat je buttons op een landkaartje wilt hebben die een tekst te zien geven bij eroverheen muizen? ;)
Oké, maar je hoeft de ronde buttons niet in Frontpage te maken. Daar kan je wel "interactieve buttons" maken, maar die komen dan in een tekstregel te staan, en ze vertellen er niet bij hoe je die op een plek boven een afbeelding kunt krijgen!
Het kan ook door de buttons te tekenen en ze gewoon in te monteren in je landkaartje.
Vervolgens zet je het landkaartje in je pagina. Hier komen de stappen:
  1. In Frontpage ga je naar de werkbalk Afbeeldingen: die ziet er grijzig uit (niet actief).
  2. Als je die niet ziet, kijk je in menu Beeld > Werkbalken, en daar zet je de werkbalk Afbeeldingen aan.
  3. Klik in het ontwerpvenster op het landkaartje (selecteren).
  4. De werkbalk Afbeeldingen wordt nu actief, je kunt nu wel op de icoontjes klikken.
  5. Vierde icoontje van rechts is een ovaaltje, met als titel "ronde hotspot" (!).
  6. Klik aan, en met het pennetje kan je nu op elke button een ronde HotSpot maken: in het midden van de button beginnen en slepen tot het formaat dat je nodig hebt.
  7. Een venstertje vraagt nu om een Adres voor een hyperlink in te voegen. Heb je niet nodig, dus in het tekstvakje achter Adres zet je: #$ (Frontpage heeft een tweede letterteken nodig, anders doet ie 't niet).
  8. Nu klik je op de "Scherminfo...", en daar vul je in wat je wilt zien als je met de muis over de button gaat.
  9. Schakel over naar CodeView, en zoek de tag <area>. In alt="..." staat nu de omschrijving die je net gegeven hebt.
  10. Verander het woord alt="..." in: title="...". Nu kunnen mensen met een andere browser dan Internet Explorer óók zien wat er staat als je over de button beweegt.
  11. Dit doe je voor alle buttons.
  12. Even kijken in de browser of alles goed staat: klaar! :)

Succes,
CSShunter

PS: met grillige lijntjes voor je aanwijsbaar gebied kan het ook. Zie hier voor een voorbeeldje.
 
Perfect!
Maar hoe kan ik er nou voor zorgen dat je wanneer je op die 'hotspot' klikt, je net zo'n klein vakje bij je muis krijgt met de adresgegevens erbij? En dat dat vakje dan net zolang blijft staan, tot je je muis gaat verplaatsen. Want deze tekst is vrij snel weer weg.

Bij voorbaat dank! :)
 
Wat je zou kunnen doen, maar ik weet niet of het helemaal valide HTML is, is een divje in de <area> plaatsen, de display op none zetten. Bij een hover van de area de display van de div op block zetten. Klinkt ingewikkeld, is het niet:

Code: 
area {
  position: relative; // nodig voor het absoluut positioneren van het divje
}

area div {
  position: absolute;
  top: 20px;
  left: 20px;
  displa: none;
}

area:hover div {
  display: block;
}

HTML: 
<area coords=" ... " ><div>Hier komt je tooltip, die kun je gewoon als normale HTML stylen.</div></area>

Misschien kan CSSHunter / Goeroeboeroe hier nog even een deskundige mening geven over het feit of dit überhaupt kan/mag.
 
Div attributes tooltip

hierzo van die website de Map tooltip , wat je dus nodig hebt :)

lees de website even door hoe je deze juist moet inplementeren.

Code: 
<img src="doghat1.jpg" usemap="#ant_map" border="0">
<map name="ant_map">
<area shape="circle" href="link" title="" coords="65,55,8">
<area shape="circle" href="link" title="" coords="110,90,12">
</map>
 
Als ik me niet vergis had ie dit al. Volgens mij wil ie dat je de tooltip langer kunt zien.
 
Ahoy!
EricBooy 24 sept. 2009
Misschien kan CSSHunter / Goeroeboeroe hier nog even een deskundige mening geven over het feit of dit überhaupt kan/mag
Klik om te vergroten...
Een snellere methode is zelf even proberen of 't werkt, en de validators eroverheen mikken. :D

Maar, gestreeld en wel, dan is hier mijn deskundige mening. ;)
Toen ik je voorgestelde code bekeek, werd ik mij gewaar dat mij een grôôôôôôte verbazing overkwam: hoe zou het kunnen dat een <div> nà een <area> element door dat area element getriggerd zou kunnen worden?! Er komt geen </area> achteraan!
- En area div {...} leek me om dezelfde reden een wat onwerkzame style.
Maar je weet het nooit, ik weet ook niet alles, en voor ik m'n vingers brand aan de hotspot...
Mijn vingers zijn ijskoud! Deze methode heeft geen schijn van kans. ;)

Op naar de specificatie van <area> bij w3.org. Es kijken wat ze daar zeggen.
Eee-i!
Binnen het <map> element kun je behalve een <area> ook een link element <a> stoppen, dat je ook met de hotspot-methode (met opgegeven cirkelvormige e.a. coördinaten) kunt positioneren op een afbeelding. Dat is interessant, want binnen een <a></a> kan je een <span> met de tooltip opnemen, die je dan zou moeten kunnen bedienen met hoveren over de <a>. - Tijd voor:
Moâh... Die geeft een beetje koele reactie van de browsers: het is keurige valid html, maar dàt kunnen ze niet. Hmm!

Om toch het hotspotteren door tekenen in Frontpage of andere design-editor te kunnen gebruiken, weer teruggegaan naar de <area> methode, maar nu de <div> daaruit losgeschroefd. Met een javascript "onmouseover" en "onmouseout" in het <area> element doe je in elk geval geen geweld aan aan de validiteit. En daarmee kwam tot ons:
En voorwaar! Wie schetst onze verbazing? :)

Hiermee ben je natuurlijk wel afhankelijk van javascript. En de methode "pure css pop-up" staat natuurlijk nog steeds klaar om zijn diensten te bewijzen. Die kan er los van hotspots ingezet worden. Alleen moet je dan redelijk zitten css-punniken om de links daarvan precies boven de plaatsnamen op het kaartje te krijgen.
Met de javascript methode kan je gewoon de hotspots intekenen, en hoef je alleen de plek van de tevoorschijn komende pop-up <div>'s te bepalen. Bij een kaartje zou je die ook allemaal op dezelfde plek naast het kaartje kunnen zetten, dat is het eenvoudigst en vraag niet zoveel css-gerangeer.

Tot slot voor Egel007:
Het javascript staat te grijp in de broncode van de pagina. De (id) die in die functie staat, betekent dat je bij de "onmouseover" en bij de "onmouseout" in de html telkens de id-naam moet ingeven van het pop-up <div>'je dat getoond moet worden bij de betreffende plaats. Dan regelt het javascript de rest vanzelf.
  • De werking van het javascript is eigenlijk heel eenvoudig: als <div>'je uit staat > aanzetten, en anders (dus als <div>'je aan staat) > dan het <div>'je uitzetten. Meer mogelijkheden zijn er niet: altijd prijs!
Gaat ie zo lukken?
Succes,
CSShunter

[edit]Hé, Erik, kan je gedachten lezen? Ik dacht gisteren: Erik noemen we voortaan: Erik "doe eens een linkje" Booy007. En dacht dat het niet gek was zoiets in een handtekening op te nemen; maar beetje flauw als ik je daarin voor zou zijn. Jij heb 't patent op het hengelen naar linkjes! Dat blijkt maar weer! ;)[/edit]
 
Laatst bewerkt:
Hmm, zo zie je maar weer hoe weinig kennis ik heb van deze elementen :P Maar je hebt weer een mooie oplossing geregeld zeg! :thumb:

Ja ik merkte zelf ook dat ik het wel erg vaak vroeg. Dus ik dacht ik zet het in m'n sig. Maar het kwam er nog even niet van, tot ik zag dat Vegras óók al op dat idee was gekomen.

We zijn dus met z'n drieën een beetje helderziend :P;)
 
Even nog over de frames. Op mijn school krijgen vierdejaars het aangeleerd frames te gebruiken. En dan echt voor alles. Ik zou zeggen: leer ze dan iets van divs en css. Dat gebruikte ik namelijk ook al in de brugklas :p
Gr. Kayle
 
Het lijkt wel of docenten ICT (op middelbare scholen), zelf helemaal geen scholing gevolgd hebben voor hun vakgebied. Of dat ze niet doen aan bijscholing.

Ik weet toevallig van een leraar op mijn oude school (ik ga nu voorzichtig zijn omdat ik onder m'n eigen naam post ;)), dat hij totaal geen kennis van zaken had. Ik heb zelf geen informatica gevolgd, omdat dat pas in het jaar na mij beschikbaar was, maar ik heb die betreffende leraar wel regelmatig ondersteund in zijn lessen.

Zo was er ook een opdracht voor de leerlingen om de kaartenbak van de mediatheek te digitaliseren. En hij had een bepaalde eis, die kwam erop neer dat er JavaScript gebruikt moest worden. Maar hij wist zelf totaal niets van JS, dus vroeg hij mij om een keer een "gastcollege" te geven.

Persoonlijk vind ik het schandalig dat een leraar zo weinig van z'n vak afweet (het is voor een docent ICT natuurlijk niet echt een vereiste kennis van JS te hebben, was meer een voorbeeld), dat hij de hulp van een leerling in moet roepen. Enerzijds zou de leraar zelf de drang moeten hebben om op de hoogte te blijven van z'n vakgebied, anderzijds moet een school in mijn ogen leraren de kans geven om bijscholing te volgen.

Ik heb afgelopen jaar dan ook uit stil protest zeg maar voor zijn halve klas de Praktische Opdrachten (PO's) gemaakt. Zij blij, ik blij (ik kreeg er ook nog een duit voor), hij absoluut niet blij, maargoed.

Nu denk ik trouwens niet dat dit het topic is om hier verder over te discussiëren, maar het verbaast me wel dat er dus meer leraren zijn die leerlingen aanraden, oh nee: verplichten met Frames te werken. Resultaat: leerlingen denken dat ze een aardige website kunnen maken, maarna school blijkt in de harde realiteit dat ze met hun kennis eigenlijk 5 (/ 10?) jaar achterlopen.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan