title pop up venster

Status
Niet open voor verdere reacties.
S

sneaky7

Gebruiker
Lid geworden
17 dec 2002
Berichten
194
hallo,
Ik wil graag gebruik maken van het venster dat op popt als je met je muis over een afbeelding maakt. maar dat blijft maar enekel seconden en dan verdwijnt dat. is er een code dat het venster openblijft zolang je er met de muis op staat. nl soms erg lange teksten
 
Paar voorbeeldjes (zie broncode):
Zit daar iets bij?

Met vriendelijke groet,
CSShunter
_________
PS:
De alt="..." tekst bij images is een Internet Explorer-only verschijnsel. De alt-tekst is eigenlijk een alternatief: alleen als het img om een of andere reden niet getoond kan worden (niet geüpload, of voor een pure tekst-browser). Zie de html-specificatie over de alt-eigenschap.

Als je in alle browsers zo'n "tooltip" wilt weergeven (die na 3 tellen weer verdwijnt), dan moet je de title="..." eigenschap gebruiken. Zie hier in de specificatie.

De title is trouwens niet alleen geschikt voor images, maar voor alle elementen! Zie deze. ;)
En met wat creativiteit kan je in IE ook van die alt-tooltips af komen; zie deze.
 
Laatst bewerkt:
Beste CSS hunter.

Ik ben er bijna, en allesinds al bedankt. Ik heb wat verondersteld word het gene geplakt in de head, en in de body van codes.
en het werkt.
Ik heb geprobeerd van waar staat: <a class="pop" href="#naarniksniets">zie toelichting met een img ipv "#naarniksniets" te vervangen met alle mogelijke codes bvb <img src="sitepics/pic.jpg"> Of gaat deze code enkel voor tekst?
Ik had graag dit pop up venster voor foto's ipv tekst. Is dit mogelijk met deze css?
Ik moet toegeven dat ik een amateur ben, en enkel een beetje html ken? dit word dudielijk als je mijn websites bekijkt zoals:
www.vriendenvantibet.be
www.tibetancommunity.be
www.chushigangdruk.be
http://users.skynet.be/om.mani/levensrad.html het is vooral in deze waar ik bij het levensrad uitleg geef bij de verschillende aspecten, maar de uitleg is soms groot dat het pop up venster te kort zichtbaar blijft

Georges
 
Hoi Georges,
Ja, bij het levensrad zou het beste de methode van css-hover-vs-image-mapping.htm gebruikt kunnen worden.
Dat is best een puzzel-klusje! ;)
En ik weet ook niet 100% of het met de afbeelding van het levensrad kan lukken: er zijn veel onderdelen die zo'n css-tooltip nodig hebben, en ze zitten erg dicht op elkaar (voor de css-tooltips kunnen alleen maar rechthoekjes gebruikt worden als oppervlak). Het zal passen en meten worden, en ook de volgorde van stapeling van de onderdelen is belangrijk: een volgend tooltip-vakje kan het link-karakter van een vorige op die plek ongedaan maken. Samen met de gekromde vormen kan dat voor probleempjes zorgen...
Maar kijk:
  • Test: levensrad-nw.htm
  • Hierin heb ik alvast een beginnetje gemaakt (zie broncode voor de css en de html).
  • De afbeelding zit er in als background-image, dat geeft de mogelijkheid om er links overheen te zetten waar je met de muis over kunt gaan.
  • Elk element heeft een achtergrond-img voor de hover-stand, waarin de omtrek van het element wordt uitgelicht: zo zie je waar je zit.
  • Alleen de eerste 3 elementen zijn gedaan en kan je met de muis overheen gaan om het effect te zien.
levensrad-3stuks.png
Succes!
Met vriendelijke groet,
CSShunter
___________
PS: Er zitten nog pittig wat html-fouten in, en ook de tabel-opbouw zou beter door mooie css vervangen kunnen worden.
Maar dat is een ander verhaal! :)
 
wow

Hi Hunter,
je bent niet blijven zitten, duidelijk.
Dit was mijn allereerste website, ik heb alles zelf geleerd. toen was dat voornamelijk met frames.

Maar ja erg bedankt voor wat je gedaan hebt. Ik heb zoals in de broncode te zien is de coordinaten nog van de verschillende aspecten. die zal ik nog wel kunnen gebruiken veronderstel ik.
dan zal ik deze code ook kunnen gebruiken voor een pop up bij één afbeelding? of dit teveel code kan het eenvoudiger?
Ikheb eerlijk gezegd nog niet naar de bron gekeken, want heb koorts en wil terug bed in, maar wou je allesinds bedanken, je hebt me echt geholpen (goed karma :))
en snel ook.

Ik breng je op de hoogte als het me gelukt is

Georges
 
Hoi Georges,
Beterschap!

Ai! - Ik dacht dat ik vanmiddag hier een waarschuwingsbericht gepost had, maar ik heb kennelijk op het uit-knopje van de browser geklikt vóór de verzendknop: weg bericht! :eek:

Doodlopende weg!
Het kwam erop neer: de pure css-oplossing van mijn voorbeeld kan toch niet werken (niet mee verder gaan!). De onderdelen waarover gehoverd moet worden staan verderop zó dicht op elkaar, dat ze niet genoeg hover-ruimte overlaten; teveel overlappende rechthoekjes:

levensrad-css.png

Wat nu?
Dan zal er toch javascript aan te pas moeten komen, in combinatie met de <area>'s, die wel muisbare polygonen toestaan die elkaar niet overlappen.
Aan een nieuw voorbeeldje wordt gewerkt!

Met vriendelijke groet,
CSShunter
 
Hi Hunter ik heb op het internet
http://www.maschek.hu/imagemap/imgmap
gevonden waar je zelf de coordinaten kan invullen. maar ik heb eigenlijk nog nooit css gebruikt . het is allemaal een beetje gokken en hopen dat het lukt.
Ik vind het bijzonder sympathiek dat jij er u voor engageerd.
Maar ik zou al tevreden zijn voor een muis over over een img ipv tekst, welke ik dat voornamelijk ga gebruiken om commentaar te geven bij foto's gepubliceerd op www.vriendenvantibet.be

als men zieket wat uitgbroed is ga ik me er eens over buigen voor het moment, probeer ik gewoon te ademen, in en uit weet je wel, ik ben nogal ziek geweest de laatste dagen. maar het gaat al veel beter. Maar als je niet goed bent lijkt dit nog erger dan chinees
Georges
 
Hoi Georges,
Het heeft even geduurd, maar nu kan ik het beloofde voorbeeld gaan tonen van het levensrad-gehover.

Het meeste werk zat in het "Voorwaarden scheppen": de originele pagina levensrad.html ontdoen van de tabellen (zodat je ziet waar je mee bezig bent) en de html-errors (zodat die geen roet in het eten kunnen gooien), en het nodige tekenwerk om de afbeelding voor het hoveren gebruiksklaar te maken.
Daarna is het invoeren van de mouse-over code in de <area>'s (met een javascriptje) zo gebeurd! :)

=====
Fase 1: de kop
We beginnen met de pagina geheel volgens css-opmaak op te zetten.
Het kwam me voor dat de 3 ommani-gifjes eigenlijk naast elkaar horen te staan, dat heb ik maar zo gemaakt.
In het origineel zag ik een "afgeronde hoeken script" voorbijkomen, maar dat werkt niet (het rondehoeken.js is geen javascript, maar een html-pagina).
Er is echter geen javascript voor de ronde hoeken nodig, dat kan ook met een afbeelding geregeld worden. Daarvoor maak je <div>'jes met een achtergrond-image.
Truc: het achtergrond-image kan alle hoekjes bevatten, op elkaar gestapeld.
Met de css-eigenschap {background-position: ....;} gebruik je alleen dat gedeelte, dat ergens nodig is. Over de background-position: dit artikeltje.
Gradiënt-image van de pagina-background in de breedte opgerekt (zodat ook bredere beeldbuizen bediend kunnen worden) en in de hoogte verkleind (want het wordt toch automatisch verticaal herhaald).

=====
Fase 2: het menu
Dit is het makkelijkste te maken met images voor de knoppen. Ook hier de truc: alle knoppen zitten in 1 afbeelding, en alle hover-toestanden van de knoppen ook. Ze kunnen zelfs gecombineerd worden met het image van de ronde hoeken!
Dan wordt het een zogenaamde "css-sprite":


ommani-sprite.gif

En weer wordt alles van de menu-knoppen met de background-position naar de juiste plaats gerangeerd. Zie ook dit artikeltje.

=====
Fase 3: content en footer
Het content-blok heeft een achtergrond-image met de zijkantjes er in. Om bij elke hoogte van een pagina goed uit te komen, zit dit er in met een repeat-y: dan wordt dit naar beneden toe herhaald zoveel als nodig is.
Vanwege die herhaling kan deze afbeelding niet in de eerdere css-sprite opgenomen worden, maar moet het een apart plaatje worden:

ommani-content-bg.gif

Er onder kan weer een stukje van de sprite komen: de onderste ronde hoekjes van het content-blok.
Met weer daaronder de update-regel en de footer.
Het copyright-scriptje verbeterd, zodat het jaartal 2011 wordt i.p.v. 111. ;)

=====
Zo, nu is het raamwerk van de pagina klaar.
De pagina is lekker snel: 5kB html (incl. css), en maar <14kB aan images; meer zit er niet in.
Even de html-validator laten checken: o.k.
Even de css-validator laten checken: o.k.
Even checken in verschillende browsers: Internet Explorer, Firefox, Chrome, Opera en Safari: o.k.

Dan kan nu het Levensrad er in gezet gaan worden.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
super

Hi Hunter
Het is supermooi,
het geeft al direkt veel meer de indruk van profesionaliteit.
de afgeronde hoeken zijn echt wel een meerwaarde.
Het is bijzonder van U dat je hier zo onbaatzuchtig veel tijd insteekt, daarvoor al weet ik niet hoe je te bedanken.
maar je hebt me wel weer moed gegeven, en zo heb ik sommige van mijn andere sites al goed kunnen verbeteren en fouten hersteld.
al staan die nog bol van fouten.

Ik ga nu (heb ik nog niet gedaan sorry, ik was zo onder de indruk van het resultaat, ga ik dus eens kijken naar je broncode)

Georges
 
je hebt me wel weer moed gegeven
Klik om te vergroten...
De inhoud en uitleg van het Levensrad maakt het zeker de moeite waard (ook wat van geleerd)!
En geen dank, 't was een leuke uitdaging: ik heb me er uitstekend mee vermaakt om er een mooie valid pagina van te maken. :)

Als je de code gaat bekijken, zie je o.a. in de css staan:
Code: 
#menu {
	height: 35px;
	margin: 10px 0 0 0;
	padding: 0;
	background: url(images/ommani-sprite.gif) 0 -20px;
	list-style: none;
	}

#home:hover, #home:focus, .home #home, 
#mantra:hover, #mantra:focus, .mantra #mantra, 
#levensrad:hover, #levensrad:focus, .levensrad #levensrad, 
#abc:hover, #abc:focus, .abc #abc, 
#contact:hover, #contact:focus, .contact #contact {
	background: url(images/ommani-sprite.gif);
	}

#home:hover, #home:focus, .home #home { background-position: 0 -55px; }
#mantra:hover, #mantra:focus, .mantra #mantra { background-position: -167px -55px; }
#levensrad:hover, #levensrad:focus, .levensrad #levensrad { background-position: -334px -55px; }
#abc:hover, #abc:focus, .abc #abc { background-position: -501px -55px; }
#contact:hover, #contact:focus, .contact #contact { background-position: -668px -55px; }
Bij deze hele bulk hoort de volgende:

Toelichting op de menu-hovers
De <ul> van het menu heeft met #menu {....} het hele rijtje knoppen er alvast in staan in de normale toestand, als achtergrond:

levensrad-sprite_menubg-deel.gif

Bij elke menu-link naar een pagina wordt voor de hover-toestand opnieuw de sprite-afbeelding gebruikt. Dat zijn de regels:
Code: 
#home:hover, #home:focus, .home #home, 
... 
	background: url(images/ommani-sprite.gif);
	}
Omdat de menu-links <li><a href="..." ... ></a></li> in de stapel-volgorde van de html in een laag boven de <ul> zitten, wordt er dus nu voor elke link-in-hover-toestand dezelfde afbeelding overheen geplakt: alleen in het gebiedje van deze link.

Maar nu zou steeds bij elke hover het meest linker deel van de sprite gebruikt worden, d.w.z. de knop "Home" in gewone toestand.
Dit wordt opgelost met het derde brok:
Code: 
#home:hover, #home:focus, .home #home { background-position: 0 -55px; }
#mantra:hover, #mantra:focus, .mantra #mantra { background-position: -167px -55px; }
...
Eerst wordt de achtergrond-afbeelding het juiste aantal pixels naar links getrokken voor de goede knop, en dan omhoog (-55px) voor de hover-toestand van die knop.

Bij elk item is ook de "focus-toestand" opgenomen. Dat is voor bezoekers die geen muis kunnen gebruiken: zij kunnen met klikken op de Tab-toets van link naar link springen, en vervolgens met de Enter-toets de link in werking zetten.

En dan is er telkens nog de geheimzinnige:
Code: 
.home #home
.mantra #mantra
enz.
eigenschap opgenomen, die hetzelfde doet als wanneer de de muis over een menu-item hovert.

Dit is een truc om bij alle pagina's van de site de pagina die op dat moment "aan" staat, de knop van die pagina automatisch te laten oplichten (hier: de knop "Levensrad").
De werking is heel simpel: op elke pagina van de site neem je in de <body> een css-class op die dezelfde naam heeft als de pagina, hier:
Code: 
<body class="levensrad">
De html zorgt er nu voor dat alléén op deze pagina de class="levensrad" later in de pagina gevolgd wordt door de id="levensrad", en dan treedt de betreffende stijlregel in werking:
Code: 
.levensrad #levensrad {...}
Hiermee is nu een universele css gemaakt, die later als los stylesheet ook voor alle andere pagina's van de site gebruikt kan worden!
  • De andere pagina's hoeven dus in hun <body> alleen maar de class toegevoegd te krijgen met de naam van die pagina, en dan wordt de knop van die pagina vanzelf opgelicht.
Tot zover, wordt vervolgd!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Verder met het voorwaardenscheppend werk!

Fase 4: de afbeelding
Aan de huidige afbeelding van het Levensrad (kopanwheel.BMP) kleven aan aantal nadelen:
  • Het is een .bmp-afbeelding, en eigenlijk mogen voor webpagina's alleen maar de soorten .gif, .jpg en .png gebruikt worden.
  • Het is een loeigrote afbeelding: 1,5MB (!), die het inladen van de pagina erg traag maakt.
  • De afbeelding is in een vroeger stadium waarschijnlijk een .jpg foto geweest, en heeft "jpg-artefacten" (pixel-onnauwkeurigheden) die het beeld smoezelig maken.
    Stukje 4x uitvergroot:

    levensrad-artefact.png

  • De foto is indertijd kennelijk geflitst: er zit een weerkaatsing in van de flitser (onderaan, vooral de rechter tijgerpoot, voor de kijker links).
  • Het origineel was waarschijnlijk een groot doek of schildering: de flits had bovenin (vooral linksboven) niet genoeg kracht om daar een helder beeld van te maken. Ook links/rechts verschillen in helderheid/contrast.
  • Er er zit een soort blauwgroen-zweem over de kleuren, waardoor het rood en vooral de gele tinten niet goed uit de verf komen. De hitte van de hellewereld valt er niet uit op te maken! En met name de tussenstukjes van de 12 schakels verdwijnen her en der in het niets.
Het karwei was: als een toegewijde monnik de pixels kalligraferen. ;)
Techniek: tekenprogramma PaintShopPro, werken met veel laagjes; deels bijtekenen, deels ophelderen, deels verdonkeren, deels verscherpen, deels vervagen, deels contrast verminderen, deels contrast vermeerderen, enz.
  • Het resultaat: levensrad.jpg
  • Ingemonteerd op de pagina: levensrad-fase-4.htm

  • Nu een jpg van maar 240kB, dus maar ca. 15% van de omvang (= ca. 6,5 keer zo snel gedownload).
  • Ter vergelijking hier naast de oude gezet: levensrad-img.htm
  • Op de pagina als background-image, met op de voorgrond een transparante gif er overheen; later nodig voor de hover-images!
De volgende stap wordt: het aanmaken van de afbeelding-secties die getoond moeten worden bij een hover over een onderdeel van de afbeelding waar een toelichting bij komt.

Wordt vervolgd!
CSShunter
 
hi,
Deze foto heb ik zelf genomen in Nepal.
Toen heb ik er een bmp van gemaakt inmijn eigen wijsheid dat het dan een betere resolutie zou zijn. ondertussen heb ik al wel wat bijgeleerd.
ik heb enkel paint, maar jouw resultaat is wederom "cool"
 
Deze foto heb ik zelf genomen in Nepal.
Klik om te vergroten...
Niet gek!
Met een Google op "kopanwheel" zag ik dat andere sites je foto hebben overgenomen!
En met een Google op "kopan wheel" zag ik dat bijna alle opnames in het Kopan Monastry een lichtere linkerkant hebben, dat zal de lichtinval ter plaatse zijn. - Het moet een ontzagwekkend grote schildering zijn.
Twee dingen vielen me op:
  • In jouw foto staat linksonder op de voorgrond een geschilderde figuur, in andere foto's niet, daar loopt de schildering door (en zit er een soort stopkontaktje in).
  • Het diagonale witte lijntje van de rechterhand naar het midden had ik aangezien voor een haartje bij het scannen, en braaf weggewerkt. - Maar uit de andere opnames maak ik op dat het wel degelijk in de originele schildering zit.
levensrad-haartje.png

Zo komt geschiedvervalsing in de wereld! ;)

Met vriendelijke groet,
CSShunter
 
hi Hunter
jaidd het s geen haartje maar de verwijzing van de monnik?
de 2 meisjes onder lnks, stonden daadwerkelijk daar, wilden niet weggaan voor ik een foto genomen had, maar nadien vond ik het eigenlijk wel best leuk, en ook een leukeherinering.
Het levensrda staat in vele kloosters net voor de ingang, en deze is idd wel groot. maar vooral juist want met mijn ervaring, heb ik al gedrochten gezien met vele fouten. deze is dus een goede.
de link naar de foto's is ook grappg want dat zjn allemaal foto's van mij. en van mezelf.

ik heb ook het gifje, moesten de mails niet aangekomen zijn, op een van de websites gezet:
www.vriendenvantibet.be
links
tot weldra weer
Georges
 
het levensrad staat op een zijmuur links geschilderd vandaar die lichtere kant (in het voorportaal)
 
... en ik steeds maar denken dat de figuur linksonder een man met baard was, ook geschilderd op een of andere manier (de stijl komt aardig overeen met die van de rest).
Maar het zijn dus twee hedendaagse jonge dames, die naar de schildering aan het kijken zijn :d:

levensrad-baardmans.png
levensrad-meisjes.png

Fluks de foto bijgewerkt, nu ik weet waar het om gaat! (nieuwe versie in de oude voorbeelden gemonteerd, met dezelfde naam: levensrad.jpg)
En meteen van de gelegenheid gebruik gemaakt om van een andere foto een betere tijgerpoot te halen. ;) Die staat er nu ook in.

Wordt vervolgd!
CSShunter
 
H Hunter
Ik wou al wat aanpassen aan mjn pagina,
jouw bewerkte levensrad, pronkt er als de beste, maar die link naar de pics opbliksemse katers lukte niet.
Ik ben ook niet zeker wat ik in de head en body moet plaatsen, ik wou proberen die ronde hoeken te zien, maar ik veronderstel dat ik enkele plaatjes mis (die sprite plaatjes?)
Ik heb je al gezegd dat ik een amateur ben, en zal waarschijnlijk nog wel wat te vragen hebben vooraleer de pagina's voledig zijn aangepast
Georges
 
Hoi Georges,
Ik snap dat je staat te popelen om dingen te gaan aanpassen, maar eerlijk gezegd denk ik dat je wel wat dingetjes aan de huidige pagina kunt veranderen, maar dat het erg lastig wordt om die met de hand te gaan ombouwen tot wat ik ervan gebrouwen heb.
  • Er zitten bv. nu, hm, 87 html-fouten in zegt de html-validator.
  • Dat is zonde van de tijd en moeite, om die er allemaal uit te gaan halen.
Mijn versie gaat kant & klaar worden, en is meteen al valid.
Het eindresultaat is er eigenlijk al, dat hoef je binnenkort alleen maar te downloaden en te uploaden. Instructies daarvoor zitten er ook aan te komen, - maar ik wil graag eerst systematisch de opbouw van de pagina en het hover-geval bespreken, zodat je niet blind aan het knippen en plakken hoeft te gaan voor andere pagina's. *)

Daar moet ik even wat tijd voor vinden, dus graag nog wat geduld: het zal goed gaan komen, dat beloof ik. :)

Wordt vervolgd!
Met vriendelijke groet,
CSShunter
__________
*) Met het systeem van deze voorbeeld-pagina wordt het heel eenvoudig om daarvan andere pagina's maken. Even een kopie maken, en daar de teksten enz. van een andere pagina inplakken. Dat zal veel makkelijker en sneller gaan dan omgekeerd (vanuit bestaande pagina's omvormen). Ook een nieuwe pagina aanmaken is op deze manier in een handomdraai gebeurd.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan