On Mouse-over show img. - Softwareontwikkeling

vrijdag 6 maart 2009 20:43

Acties:

0 Henk 'm!

Topicstarter

Wat ik wil is eigenlijk vrij simpel. We hebben 4 woorden. Als iemand met zijn muis over 1 van die woorden gaat.
Wordt er afhankelijk van welk woord het is, in een veld eronder een plaatje getoond.

Dit kan naar mijn idee op verschillende manieren:

PHP
Het nadeel van deze manier is de uitlijning van het plaatje. Het grote voordeel is dat vrij gemakkelijk is om afhankelijk van een bepaald woord een image te laten zien.

CSS
Het voordeel van deze methode is de uitlijning, en de simpliciteit van de code. Helaas is wordt het wel snel te veel code aangezien je voor elk woord (en de daarbij behorende img) een aparte classe moet maken.

Javascript
Het nadeel van deze manier is de uitlijning van het plaatje. Ook ondersteund niet iedereen javascript, en ik wil graag mijn website javascript vrij houden. Deze manier valt dus eigenlijk af.

Flash
Grote voordeel is dat ik gelijk een hoop mooie effects erbij kan gooien. Nadeel is ondersteuning. Deze valt dus ook al eigenlijk af.

Zie ik wat methode's over het hoofd, en wat zijn jullie ideeën hierover? Ik ben een newb als het op webprogramming aankomt maar alles is vast wel te vinden met google.

Lux.Architectuur | Van Dromen tot Wonen | www.Lux-a.nl

vrijdag 6 maart 2009 20:46

Acties:

0 Henk 'm!

Pietert

There is no spoon

Ondersteuning van Flash is je nadeel? Da's best ouderwets denken hoor.

Wat je wil kan makkelijk met Flash 7 en dat heeft 99.1% penetratie bij gebruikers.

http://www.adobe.com/prod.../version_penetration.html

Dat de uitlijning opgegeven wordt als nadeel begrijp ik niet helemaal, da's een kwestie van extra werk en je er in verdiepen. Dat geld voor alle bovengenoemde technieken en is dus eigenlijk ook niet echt een steekhoudend argument.

Ik zou eerder kijken naar welke techniek je al onder de knie hebt/makkelijk onder de knie kan krijgen.

[ Voor 41% gewijzigd door Pietert op 06-03-2009 20:50 ]

vrijdag 6 maart 2009 20:49

Acties:

0 Henk 'm!

Verwijderd

Mag je mij eens vertellen hoe je het met alleen PHP wel doen.PHP is een server-side taal, dus je zult het uiteindelijk alsnog met html/css/javascript moeten oplossen. Imho de enige fatsoelijke oplossing is een oplossing met javascript. Iedereen ondersteund het, en met toolkits als JQuery kun je er ook (super)gemakkelijk bijna net zulke effecten als met flash mee halen.

vrijdag 6 maart 2009 20:50

Acties:

0 Henk 'm!

Verwijderd

Pietert schreef op vrijdag 06 maart 2009 @ 20:46:
Ondersteuning van Flash is je nadeel? Da's best ouderwets denken hoor.

Wat je wil kan makkelijk met Flash 7 en dat heeft 99.1% penetratie bij gebruikers.

http://www.adobe.com/prod.../version_penetration.html

doe dan flash 9, toch al 98% penetratie.

vrijdag 6 maart 2009 20:54

Acties:

0 Henk 'm!

Patriot

Fulltime #whatpulsert

Verwijderd schreef op vrijdag 06 maart 2009 @ 20:50:
[...]

doe dan flash 9, toch al 98% penetratie.

En het voordeel? Als het met 7 kan zonder in te leveren op functionaliteit is het toch dom om die extra mensen te negeren?

vrijdag 6 maart 2009 20:57

Acties:

0 Henk 'm!

Verwijderd

HTML:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    </head>
    <body>

        <span class="effect" val="http://gathering.tweakers.net/usericons/147126/17-2.jpg">Aap</span>
        <span class="effect" val="http://gathering.tweakers.net/usericons/130188/Untitled-1.jpg">Noot</span>
        <div id="imagebox"><!-- images go here --></div>

        <script>
            $(document).ready(function(){
                $(".effect").mouseover(function(){
                  $("#imagebox").html("<img src='"+ $(this).attr("val") +"'></img>");
                }).mouseout(function(){
                  $("#imagebox").empty();
                });
            });
        </script>
    </body>
</html>

[ Voor 39% gewijzigd door Verwijderd op 06-03-2009 21:12 ]

vrijdag 6 maart 2009 20:59

Acties:

0 Henk 'm!

Verwijderd

Patriot schreef op vrijdag 06 maart 2009 @ 20:54:
[...]
En het voordeel? Als het met 7 kan zonder in te leveren op functionaliteit is het toch dom om die extra mensen te negeren?

Nou, dat kleine percentage mensen dat je negeert (oke, denk even aan je doelgroep, misschien ligt het daar anders) is niet zo groot. Maar -correct me if i'm wrong- dan ben je lijkt mij meer toekomstgericht bezig. Ik weet niet hoe het zit met prestaties?

vrijdag 6 maart 2009 21:12

Acties:

0 Henk 'm!

battler

Topicstarter

Bedankt allemaal voor de snelle reactie. Een paar punten die ik nog wel even wil maken.
De website is voornamelijk bedoeld voor mijzelf. Dit neemt niet weg dat ik een website wil
hebben die gewoon goed in elkaar zit en ook door iedereen bekeken moet kunnen worden.

Nu kan ik er mee leven dat wanneer je flash hebt je een bepaald effect te zijn krijg, en wanneer
je dit niet hebt je gewoon een droog menu te zien krijgt. Ik ga nu even kijken of ik ergens een tut.
kan vinden die mij een beetje de wegwijs maakt.

Lux.Architectuur | Van Dromen tot Wonen | www.Lux-a.nl

zaterdag 7 maart 2009 13:40

Acties:

0 Henk 'm!

DoubleJ

Een ninjja!

dit kan prima zonder JS, en jQuery lijkt me helemaal overkill.

bijvoorbeeld

Cascading Stylesheet:

a{
display:block;
width:10px;
height:10px;
background-repeat:no-repeat;
}
a.one{
background:url(http://server.extensie/plaatjevan10bij10px_one.gif) -10px 0px
}
a.two{
background:url(http://server.extensie/plaatjevan10bij10px_two.gif) -10px 0px
}
/* etc... */

/* Plaats BG op zichbare plek */
a:hover{
background-position:0px 0px;
}

HTML:

<a class="one"><span>text</span></a>
<a class="two"><span>text</span></a>
<a class="three"><span>text</span></a>
<a class="four"><span>text</span></a>
<!--- span is overbodig in dit voorbeeld, wellicht handig voor wat extra styling... -->

Wanneer je geen anchors wilt gebruiken zul je wel Javascript moeten gebruiken. IE ondersteund geen :hover op andere elementen

@shadow

offtopic:
dude... je hebt een iStockPhoto watermerk op je site staan....

Je verkoopt een product, betaal die paar euro man.

[ Voor 26% gewijzigd door DoubleJ op 07-03-2009 17:55 ]

zaterdag 7 maart 2009 21:00

Acties:

0 Henk 'm!

_JGC_

IE7 en hoger ondersteunen gewoon :hover op alle elementen. Voor IE6 kan je desnoods de csshover.htc behavior gebruiken. Heb je geen javascript voor nodig (alhoewel een behavior ook gewoon javascript is).

zaterdag 7 maart 2009 21:18

Acties:

0 Henk 'm!

mcDavid

Dan nog is het, als het veel verschillende plaatjes betreft, gigantisch veel makkelijker om dit in javascript te maken. Dus lijkt JS mij een verstandiger keuze dan CSS, qua ondersteuning maakt het vrijwel niet uit, machines die geen javascript ondersteunen, ondersteunen in 99% van de gevallen ook geen CSS (screenreaders, bots, enz.).

zaterdag 7 maart 2009 21:27

Acties:

0 Henk 'm!

Fuzzillogic

Cool

mcDavid schreef op zaterdag 07 maart 2009 @ 21:18:
Dan nog is het, als het veel verschillende plaatjes betreft, gigantisch veel makkelijker om dit in javascript te maken. Dus lijkt JS mij een verstandiger keuze dan CSS, qua ondersteuning maakt het vrijwel niet uit, machines die geen javascript ondersteunen, ondersteunen in 99% van de gevallen ook geen CSS (screenreaders, bots, enz.).

Ondersteunen en geactiveerd hebben zijn twee verschillende zaken. Op m'n mobiel heb ik javascript uitgeschakeld, omdat sommige sites dermate veel javascript-drek inladen voor zaken waar ik toch niet in geinteresseerd ben, maar die de weergave wel extreem vertragen. Zelfs op de desktop erger ik me daar wel eens aan en heb javascript voor diverse sites uitgeschakeld. En ik ken mensen die javascript zelfs gewoon standaard uit hebben staan. Zoek maar eens op "unobtrusive". En vergeet zoekmachines niet.

Overigens is het m.i. wel afhankelijk van de beoogde functionaliteit. Dat sommige features van een site niet werken zonder javascript, soit, maar basic navigatie en een leesbare weergave is toch wel het minimum.

Maar ik denk dat TS met jQuery, hier al genoemd, al een stuk van zijn probleem kan oplossen. Dus verdiep je eens in jQuery. Kan sowieso geen kwaad, want het is idd een veelzijdige en veelgebruikte library, die vaak van pas komt.

[ Voor 9% gewijzigd door Fuzzillogic op 07-03-2009 21:29 ]

zaterdag 7 maart 2009 21:35

Acties:

0 Henk 'm!

mcDavid

...als het alleen maar om een achtergrondafbeelding gaat, lijkt het me haast wenselijk dat dat niet werkt als mensen om bijv. dataverkeer te sparen javascript standaard uit hebben...

zaterdag 7 maart 2009 22:36

Acties:

0 Henk 'm!

Verwijderd

In vredesnaam, wie en waarom zou iemand javascript uit hebben staan? En moet je werkelijk rekening houden met die personen? Dat is net zoiets als rekening houden met mensen zonder grafische interface en die met lynx browsen ofzo. Zonder javascript werkt driekwart van het internet niet... Natuurlijk wel leuk als het kan in css, maar als ik het uit mijn hoofd en binnen 5 minuten met jQuery kan, dan ga ik echt niet meer tijd investeren en het met css proberen om die 0.00001 procent van de internetgebruikers tevreden te houden.

zaterdag 7 maart 2009 23:22

Acties:

0 Henk 'm!

DoubleJ

Een ninjja!

Beschikbaarheid is 1 argument. Als je je site vlot wilt houden, minimaliseer je de hoeveelheid JS. Een volledig library inladen voor 1 functie is overkill

[ Voor 22% gewijzigd door DoubleJ op 07-03-2009 23:22 ]

zaterdag 7 maart 2009 23:36

Acties:

0 Henk 'm!

mocean

battler schreef op vrijdag 06 maart 2009 @ 21:12:
...
De website is voornamelijk bedoeld voor mijzelf.
...

Waarom maak je je dan druk over het feit dat Javascript uitstaat bij sommige mensen? Of Flash in 1 % van de gevallen niet aanwezig is? Of waarom trouwens überhaupt een effect bij een mouseover op een site voor jezelf, welke functionaliteit wil je bereiken?

Koop of verkoop je webshop: ecquisition.com

zaterdag 7 maart 2009 23:36

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Verwijderd schreef op zaterdag 07 maart 2009 @ 22:36:
In vredesnaam, wie en waarom zou iemand javascript uit hebben staan? En moet je werkelijk rekening houden met die personen? Dat is net zoiets als rekening houden met mensen zonder grafische interface en die met lynx browsen ofzo. Zonder javascript werkt driekwart van het internet niet... Natuurlijk wel leuk als het kan in css, maar als ik het uit mijn hoofd en binnen 5 minuten met jQuery kan, dan ga ik echt niet meer tijd investeren en het met css proberen om die 0.00001 procent van de internetgebruikers tevreden te houden.

Waarom "iemand" (lees: o.a. ik) javascript uitzet heb ik hierboven al eens uitgelegd. Zet javascript maar eens uit en ga eens wat rondsurfen. Goede sites werken gewoon, en je zult verbaasd zijn over de snelheid waarmee het opeens gaat. Javascript gebruiken omdat je CSS-kennis gebrekkig is, is natuurlijk erg jammer. Daarnaast, sites die gewoon netjes zijn opgebouwd werken ook daadwerkelijk zonder verdere aanpassingen direct en bruikbaar in lynx zonder javascript.

Maar blijkbaar heeft beroepseer voor velen geen betekenis meer. "ziet toch goed uit zo" is maar al te vaak al voldoende voor "developers"

zaterdag 7 maart 2009 23:54

Acties:

0 Henk 'm!

Verwijderd

Wie zegt dat mijn CSS kennis gebrekkig is? Ik weet best dat het ook met een hover op te lossen is, maar ik weet ook dat ik dan CSS gebruik waar het niet voor bedoeld is. En dat heeft niets met beroepseer of wannabe- "Developer" te maken.

Html -> Statische content
CSS -> Opmaak
Javascript -> Dynamiek

Als je dat nou gewoon strikt gescheiden houdt, dan vind ik dat veel 'mooier' dan allerlei workarounds met css verzinnen.

[ Voor 16% gewijzigd door Verwijderd op 08-03-2009 00:00 ]

zondag 8 maart 2009 00:04

Acties:

0 Henk 'm!

posttoast

Verwijderd schreef op zaterdag 07 maart 2009 @ 23:54:
Wie zegt dat mijn CSS kennis gebrekkig is? Ik weet best dat het ook met een hover op te lossen is, maar ik weet ook dat ik dan CSS gebruik waar het niet voor bedoeld is. En dat heeft niets met beroepseer of wannabe- "Developer" te maken.

Html -> Statische content
CSS -> Opmaak
Javascript -> Dynamiek

Als je dat nou gewoon strikt gescheiden houdt, dan vind ik dat veel 'mooier' dan allerlei workarounds met css verzinnen.

Wat mij betreft kan dit prima met CSS en is het daar ook voor bedoeld. In de toekomst zul je ook kunnen animeren met CSS. Javascript is mijns inziens niet voor dynamiek (als in animatie) maar voor gedrag. Dat is een stuk breder.

omniscale.nl

zondag 8 maart 2009 00:13

Acties:

0 Henk 'm!

Verwijderd

Fuzzillogic schreef op zaterdag 07 maart 2009 @ 23:36:
[...]
Maar blijkbaar heeft beroepseer voor velen geen betekenis meer. "ziet toch goed uit zo" is maar al te vaak al voldoende voor "developers"

Dat ligt er meestal ook aan dat elke minuut geld kost als je aan het werk bent.
Als het in 2 uur 'slordig' kan, of in 8 uur 'netjes', terwijl het visuele effect hetzelfde is, zal de klant voor de 2 uur kiezen. Tijd is geld...

zondag 8 maart 2009 00:32

Acties:

0 Henk 'm!

Fuzzillogic

Cool

Verwijderd schreef op zaterdag 07 maart 2009 @ 23:54:
Wie zegt dat mijn CSS kennis gebrekkig is? Ik weet best dat het ook met een hover op te lossen is, maar ik weet ook dat ik dan CSS gebruik waar het niet voor bedoeld is. En dat heeft niets met beroepseer of wannabe- "Developer" te maken.

Rustig maar

Met "je" doelde ik niet perse op jou, maar in het algemeen.

Html -> Statische content
CSS -> Opmaak
Javascript -> Dynamiek

Als je dat nou gewoon strikt gescheiden houdt, dan vind ik dat veel 'mooier' dan allerlei workarounds met css verzinnen.

De vraag is waar opmaak eindigt en dynamiek begint. Zelf tel ik daar uitklappende menuutjes en andere :hover-effectjes ook bij. Dynamiek vind ik meer als de DOM aangepast wordt. Of dat in geval van TS aan de orde is, is aan de TS om te beoordelen.

zondag 8 maart 2009 00:35

Acties:

0 Henk 'm!

krvabo

MATERIALISE!

DoubleJ schreef op zaterdag 07 maart 2009 @ 13:40:
dit kan prima zonder JS, en jQuery lijkt me helemaal overkill.

bijvoorbeeld
[..]

Waarom zou je hier in godsnaam CSS voor gaan gebruiken

Elke keer als je dan een foto toevoegd (tenzij je dan weer een script- / programmeertaal gaat gebruiken) moet je je html EN css aanpassen. En sowieso classes gebruiken voor iets wat overduidelijk met een ID moet kan is gewoon raar.

De eerder geposte html met jQuery was inderdaad overkill, en was invalide qua html.
Ik heb net even een testcaseje geschreven. Het kan prima unobtrusive en licht.

HTML:

<html>
<head>
<script type="text/javascript">
function showImg(elemhref) {
    document.getElementById('picview').innerHTML = '<img src="'+elemhref+'">';
    return false;
}

function addHandlers() {
    var elements = (document['getElementsByClassName'] ? document.getElementsByClassName('imageview') : getElementsByClass('imageview'));
    var eSize = elements.length;

    for (var i = 0; i < eSize; i++) {

        elements[i].onclick = function(elemhref)
            {
                return function() { return showImg(elemhref); }
            }(elements[i].getAttribute('href'));
        elements[i].href = null;
    }
}


function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}


window.onload = addHandlers;
</script>
</head>

<body>

<a class="imageview" href="iso.jpg">iso</a>
<a class="imageview" href="header.jpg">header</a>
<a class="imageview" href="films/vinkje.gif">vinkje</a>

<div id="picview"></div>

</body>
</html>

Alleen door IE komt er dan weer die extra class-functie bij, maar a-la.

Pong is probably the best designed shooter in the world.
It's the only one that is made so that if you camp, you die.

zondag 8 maart 2009 00:45

Acties:

0 Henk 'm!

Verwijderd

Je weet dat jQuery kaal maar 19kb is he? Gegarandeerd op iedere browser werkt, en dat het dus bijna nooit uit kan om zelf allerlei handlers te gaan schrijven. Helemaal als je het nog voor meer dingen binnen je site gaat gebruiken

zondag 8 maart 2009 00:47

Acties:

0 Henk 'm!

krvabo

MATERIALISE!

Nee uiteraard, als je het voor meer dingen gaat gebruiken kun je het allicht met jQuery doen.
Ik geef maar aan dat het voor 1 simpel effectje overkill is

Overigens kan mijn JS nog een stuk kleiner door gebruik te maken van getElementsByTagName, maargoed. Dit is minder foutgevoelig.

[ Voor 28% gewijzigd door krvabo op 08-03-2009 05:36 ]

Pong is probably the best designed shooter in the world.
It's the only one that is made so that if you camp, you die.