afbeelding aan afbeelding koppelen,vervolgens door linken naar desbetreffende pagina

Status
Niet open voor verdere reacties.
C

coolbody1988

Gebruiker
Lid geworden
17 mrt 2008
Berichten
76
Hallo Helpmij-forumleden,

Wellicht stel ik de vraag in een verkeerd subforum, echter heeft het wel met websites/internet te maken.

Het zit namelijk zo, ik wil op een website een afbeelding plaatsen waarbij het volgende mogelijk is;

1. Afbeelding van een auto wordt op homepage weergegeven.
2. Bezoeker moet op deze afbeelding diverse onderdelen kunnen aanklikken.
3. Als de bezoeker bijvoorbeeld het wiel aan klikt, moet deze uitvergroot worden.
4. Bij nogmaals klikken moet de gebruiker naar de webpagina over wielen worden doorverwezen.
(Er moeten in totaal 6 onderdelen in de hoofd afbeelding worden verwerkt).

Zelf ben ik al aan het proberen geweest met een programma (Mapedit), hierbij werd alles al mogelijk maar dan zonder stap 3. Graag zou ik die stap er wel in verwerkt willen hebben, als het mogelijk is. Er moet als het ware nog een afbeelding gekoppeld worden aan de hoofd afbeelding.

Iemand een idee hoe ik dit kan realiseren?
 
Laatst bewerkt:
Hoi coolbody1988.
Ja, ik denk het wel.
Het kan in principe met een image-map gerealiseerd worden, maar dan is er javascript nodig om de vergroting te showen.
Maar het kan ook, veel mooier, met een pure css-hover (zonder javascript).
Wat er daar als hover verschijnt is een tekst, maar dat kan ook een img met een vergroot gedeelte zijn. De link-klik mogelijkheid zit er al in.
Met vriendelijke groet,
CSShunter
_____
PS: twee keer klikken om naar een onderdeel te gaan (eerst voor de vergroting, en dan voor de nieuwe pagina) lijkt me overbodig en niet zo gebruikersvriendelijk. Waarschijnlijk is het heel goed mogelijk om de vergroting te laten zien als je met de muis over de onderdelen van de afbeelding gaat (zonder te klikken).

Ik zie dat alleen mislukken als het heel erg grote uitvergrotingen zijn, of als de afbeelding zo klein is dat er geen niet-overlappende rechthoekjes voor het hoveren mogelijk zijn (wat nodig is voor een css-hover; bij een img-map mogen het ook grillige veelhoeken zijn die als puzzelstukjes aan/in elkaar passen).

Voor super-vergrotingen zou denk ik ook javascript nodig zijn, dan krijg je zoiets als dit principe: website-galery.php.
Daar moet dan nog de doorklik-mogelijkheid aan toegevoegd worden.
 
Laatst bewerkt:
Bedankt voor de informatie, eens kijken of ik het kan realiseren.
Inderdaad je hebt gelijk, de klik om een plaatje te vergroten is een stap teveel. Het is beter om een uitvergroting te laten zien wanneer er overheen gehoverd wordt.
Bedankt voor het meedenken.

PS. Kan dit ook worden gerealiseerd met het programma Kompozer (WYSIWYG editor)
Heb wel een klein beetje ervaring met CSS en HTML.
Leuke uitdaging om het eens te proberen, heb je tips hoe ik zoiets het beste kan aanpakken?
 
Hoi coolbody1988,
Ja hoor, het kan prima met KompoZer (je zal wel in de code-weergave aan de slag moeten), het kan zelfs ook met alleen Kladblok. :)
Dwz. er is wel een tekenprogramma bij nodig om mooie uitsneden te maken en een compositie-afbeelding te fabrieken.

Om tips te kunnen geven is het nodig om eens te kijken hoe je afbeelding en de bijbehorende vergrotingen er uit zien.
Heb je die ergens online staan?

Met vriendelijke groet,
CSShunter
 
Hallo csshunter,

Dit had ik in gedachten;

Hoofd afbeelding (de rode punten, moeten de plekken zijn waarover mensen kunnen hoveren, en dan komt de afbeelding tevoorschijn waaraan een link gekoppeld wordt wanneer erop geklikt wordt.)
http://imageshack.us/photo/my-images/687/bmwminieseethru2.jpg/

En dan bij het motor ruim;
http://imageshack.us/photo/my-images/835/luchtfilter.jpg/

het meest rechtse puntje;
http://imageshack.us/photo/my-images/191/uitlaat.jpg/

(de plaatjes mogen kleiner zijn,maar moeten wel duidelijk worden)

Wat voor tekenprogramma volstaat? Zelf was ik al aan het proberen geweest met MS Paint.

Groeten,


Coolbody1988.
 
Hoi coolbody1988,
Plaatjes bekeken, en het is prima realiseerbaar zonder javascript. CSS staat voor niets!
Nu de tips.

De hoofdtip:
Toelichting:
  • De auto zelf is een achtergrond-afbeelding; daar zitten de rode stippen al in (ik heb ze iets groter gemaakt om duidelijker op te vallen).
  • De links zijn lege oppervlakjes van 35*35px (wat extra ruimte om de stippen heen = makkelijk hoverbaar). Met een tijdelijk randje kan je ze zien en op de goede positie zetten:

    hover-auto-posities.png

  • In elke link zit een <span>. Die <span> is de truc.
  • In de span zit als background-image het plaatje van de vergroting. Om niet in de 35*35px te hoeven passen, heeft de span een absolute positie: dan kan uit het vakje ontsnapt worden. Met de margins van de <span> kan de grote afbeelding op z'n plaats komen.
  • Nu is alleen de vergroting nog zichtbaar. Dat wordt uitgeschakeld door de <span>'s een {margin-left:-9999px} te geven, voor de normale toestand. Dat is een flink stuk links van het beeldscherm: in de keuken, op het trapportaal of de deur uit; maar in elk geval niet op het scherm.
  • Met bv. #motor:hover span (margin-left: -70px;} vertellen we de browser dat bij een hover over de rode motor-stip de span op die linker-margin van -70px gezet moet worden: de positie die het moet worden ipv de 10 meter naar links.
  • Binnen de span heb ik ook nog een <strong> element gezet, waarin een bijschrift bij de vergroting opgenomen kan worden.
  • Een <strong> is uit zichzelf alleen om nadruk te geven (vette letters op scherm), maar deze keer is de <strong> extra gestyled om goed in de vergroting tot z'n recht te komen.
  • Behalve handig voor de kijker op scherm heeft dit nog twee voordelen: Google ziet die woorden ook (niet de plaatjes!), en het zijn belangrijke trefwoorden. Tweede voordeel: de toegankelijkheid is ermee gebaat; mensen met een pure platte-tekstbrowser (of uitgeschakelde css) en mensen met een voorleesbrowser weten nu ook waar de links op slaan.
  • Zonder css en images komt er een keurige ongeordende list tevoorschijn waar de links ook in staan *):

    hover-auto-css-loos.png


    Daar houden Google en de WCAG-Toegankelijkheidsrichtlijnen van. :love:
  • Na het css-gepriegel ziet de html er prettig eenvoudig uit:
    HTML: 
    <ul id="auto">
   <li><a id="motor" href="motor.html">        <span><strong>motor</strong></span></a></li>
   <li><a id="wielkast" href="wielkasten.html"><span><strong>wielkasten</strong></span></a></li>
   <li><a id="band" href="banden.html">        <span><strong>banden</strong></span></a></li>
   <li><a id="ruit" href="ruiten.html">        <span><strong>ruiten</strong></span></a></li>
   <li><a id="uitlaat" href="uitlaten.htm">    <span><strong>uitlaten</strong></span></a></li>
   <li><a id="wieldop" href="wieldoppen.html"> <span><strong>wieldoppen</strong></span></a></li>
</ul>
Getest en in orde bevonden in: Firefox, Chrome, Internet Explorer7, Opera en Safari.
Html-validator en css-validator akkoord.
De Webrichtlijnen Quickscan komt uit op 46/47 score; met een php-headertje voor de charset erbij is dat 47/47.

Verdere tips:
In de broncode!

Tekenprogramma:
Ja, MS Paint is heel basic, daar kan je eenvoudige dingen mee doen.
Je zou ook eens de gratis Irfan View kunnen downloaden, die kan van alles (bv. ook goed vergroten en verkleinen); maar het is geen echt teken- of fotoprogramma zoals PaintShopPro en Photoshop of iets dergelijks uit de Adobe-stallen, waar je nog veel meer mee kan (tegen betaling!).

Succes!
Met vriendelijke groet,
CSShunter
____________-
*) Check de testpagina bv. in Firefox: menu Beeld > Paginastijl > Geen Stijl.
 
Laatst bewerkt:
Hallo CSS-hunter,

Geweldig! Bedankt voor de tips/voorbeeld.
Ik ga er morgen weer mee aan de slag, leuk leerproces.
Zelf ken ik de basisprincipes een beetje van HTML/CSS je hebt me echt goed op weg geholpen.
Hoe het SEO (zoekmachine technisch) in elkaar zit, zag ik al. Geweldig dat dit op zo'n CSS manier mogelijk is.
Wanneer je Javascript gebruikt, is deze optie komen te vervallen.
Bedankt voor de moeite en bruikbare tips.
 
Laatst bewerkt:
Hallo CSS-hunter,

Nogmaals bedankt voor de informatie, echter heb ik nog 1 probleem(pje).
Alles zit op de goede plaats, alleen de plek waar de bullet van "wielkasten" zit is versprongen.
Deze bevindt zich nu boven de afbeelding, enig idee hoe ik dit kan oplossen?
Heb al naar de px gekeken, maar deze zijn gelijk aan het voorbeeld dat jij gaf.
Ik heb ook al geprobeerd om andere waarden in te geven, maar er veranderd niets.
Enig idee waar het aan kan liggen?
Voor de rest ziet het er prima uit, heb nu ook de juiste afbeeldingen/links kunnen toevoegen.
Ziet er al erg gaaf uit! :)
 
Laatst bewerkt:
Hoi coolbody1988,
Hé, raar. Misschien een ordinair tikfoutje ergens? *) Geven de html-validator en de css-validator groen licht?

Met vriendelijke groet,
CSShunter
_______
*) Bij mij wil er na bv. margin-top nog wel eens een ; ipv een : insluipen. Dan helpen de opgegeven pixels niet. ;)
 
Hey CSSHunter,

Nee die validators heb ik nog niet uitgevoerd, heb het bestand nog niet online staan. Heb enkel nog lokaal getest.
Heb alles in kladblok gemaakt, even kijken of ik het nu online kan krijgen dan kan ik die testen uitvoeren.
Anders kijk ik vanavond thuis even.
 
Laatst bewerkt:
Als je de add-on Webdeveloper Toolbar voor Firefox even binnenhaalt (absolute aanrader!), dan kan je via Menu: Tools > "Validate Local HTML" en "Validate Local CSS" uitvoeren op een pagina, met één klik op de knop.

Anders kan je de html resp. css ook inplakken in een tekstvak van de validators, maar dat is weer zo'n gedoe.

O ja, als je de FF add-on HTML-Tidy toevoegt, kan je in de Firefox-broncode van een pagina meteen de html-validatie zien. Ook van locale pagina's.

De w3c-validator en Tidy verschillen soms iets in opmerkingen, maar ik check ze altijd even alle twee, dat kan noot kwaad. :)

Ik ben benieuwd!
 
Laatst bewerkt:
Krijg een foutmelding als ik Validate local doe. (Maakt niet uit of het de HTML of CSS optie betreft).
Dus dat werkt ook niet op het moment. :(
Ik zal vanavond eens kijken of ik het bestand online kan krijgen.
 
Ik heb het even via het tekstvlak van de validators gedaan. Voor CSS krijg ik 1 foutmelding;

Je hebt geen tekstkleur opgegeven (of de kleur is transparant) maar je hebt wel een achtergrondkleur opgegeven.
Zorg ervoor dat het opgeven van tekst- en achtergrondkleuren de tekst leesbaar houdt.


Bij de HTML-validator krijg ik meerder foutmeldingen, maar die gaan over links die niet SEO-vriendelijk zijn.
 
Laatst bewerkt:
Ah, dan moet ik even wachten tot ie online staat.
  • Sommige tikfoutjes kunnen de validators er niet uit halen. Bv. als in de css staat #wielkas of #wielkasten, en in de html staat <a id="wielkast" href="..."> enz., dan is het valid css en valid html, maar de wielkast komt niet op de goede plek.
  • En misschien is het ook iets anders.

De css-waarschuwing gaat over de #auto span {background-color:#c0c0c0;}, waar inderdaad geen color bij genoemd staat; dat hoeft hier eigenlijk niet, want het enige enige in de <span> is de <strong> waarvoor wel zowel een background-color als een voorgrond-color zijn opgegeven. Maar om de css-validator gerust te stellen, kan je er nog #auto span {color:black;} bij zetten.

De html-errors zullen elders in de pagina zitten, want m'n testversie komt er heelhuids door. Vermoedelijk veroorzaken die de fout niet, maar je weet het nooit.
 
Hallo csshunter,

Heb goed nieuws, ik had inderdaad een typfoutje gemaakt. Had per ongelijk 1 woord met een hoofdletter getypt.
Helaas heb ik hem nog niet online kunnen krijgen, dus kan je het eind resultaat (nog) niet laten zien :(.


Heb het voor elkaar kijk maar op; http://janssen.mimsaxion.nl/

Groeten Sander.


CssHunter,

Hartelijk dank voor je hulp.
 
Laatst bewerkt:
Heb het voor elkaar kijk maar...
Klik om te vergroten...
Nopjes ... :confused:
De auto en de andere afbeeldingen komen bij mij niet tevoorschijn.

Waarschijnlijk omdat in het stylesheet de links gaan naar:
Code: 
#auto {
    ...
   background: url(http://janssen.mimsaxion.nl:2222/CMD_FILE_MANAGER/domains/janssen.mimsaxion.nl/public_html/images2/mini.png) no-repeat;
   }

#luchtfilter:hover span,
#luchtfilter:focus span { /* gegevens pop-up luchtfilter-img */
   ...
   background-image: url(http://janssen.mimsaxion.nl:2222/CMD_FILE_MANAGER/domains/janssen.mimsaxion.nl/public_html/images2/hover-luchtfilter.png);
   }
enz.
Als ik dit doe:
Code: 
...
   background-image: url(http://janssen.mimsaxion.nl/images2/mini.png}
...
   background-image: url(http://janssen.mimsaxion.nl/images2/hover-luchtfilter.png}
...
worden ze zichtbaar, want ze zijn wel geüpload.

En het hoveren gaat alvast prima: alles zit op de goede plaats! :thumb:
 
Je hebt gelijk, ik was ingelogd op de backend toen werkte het wel.
Zal vandaag nog eens even stoeien met die links, de afbeeldingen zijn wel geupload dus het is een kwestie van links hernoemen.

*Als het goed is werken ze nu wel allemaal.
 
Laatst bewerkt:
Css Hunter,

Mooi he :) Ben er wel blij mee :thumb:
Nogmaals bedankt voor je hulp/snelle reacties. :thumb::thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan