Hoe verwissel ik een afbeelding tegelijkertijd met een stuk tekst?

**Suchard** · 17 mei 2012, 14:34

Ik wil buttons plaatsen op de pagina, en die met 'swap image" laten verwisselen, maar ik wil bijbehorende tekst tegelijkertijd mee laten veranderen.

Is dit mogelijk?

Zo ja, hoe?

**janthiemen** · 17 mei 2012, 16:14

Ja, dat is mogelijk, en niet zo heel lastig. Je maakt 2 divjes, een linkje en een javascript functie. Die javascript functie activeer je door op de link te klikken, en die geeft ook meteen de variabelen voor de inhoud van de div's mee. De javascript functie vult vervolgens de div's met de variabelen die hij uit de link haalde. Uiteindelijk kom je op iets als dit:

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>content veranderen</title>
<script type="text/javascript">
function ReplaceContentInContainer(afbeelding,tekst) {
div1.innerHTML = '<img src="'+afbeelding+'" />';
div2.innerHTML = tekst;
}
</script>
</head>
 
<body>
<div id="div1">
<img src="afbeelding1.png" />
</div>
<div id="div2">
Tekst
</div>
<a href="javascript:ReplaceContentInContainer('afbeelding2.png','anders')">Klik om te veranderen</a>
</body>
</html>

**Suchard** · 17 mei 2012, 19:06

Beste Jan?,

Allereerst bedankt voor je hulp.Ik ben een heel stuk verder gekomen, maar er is nog wel een probleempje.

De tekst werkt, maar na de "start"afbeelding, worden de andere niet meer getoond.

Ik zet altijd een te groot psd document in de images map, en van daaruit maak ik dan de jpeg, die ik verklein.

Hoe kan ik dit nu het beste doen.

http://www.decorator.nl/portfolio.html

**janthiemen** · 18 mei 2012, 10:15

Ik begrijp niet helemaal wat je bedoelt, maar dat de afbeeldingen niet worden weergegeven ligt eraan dat hij ze niet kan vinden op de server. Ook moet je er op letten, dat je bij bijvoorbeeld de eerste afbeelding er nog wel images/ voor moet zetten, wanneer ze in de images map staan. Dan zou je bijvoorbeeld bij de eerste button krijgen:

HTML Code:

1
<a href="javascript:ReplaceContentInContainer('images/schaalmodellen 1.jpg','tekst behorend bij button 1')">

in plaats van

HTML Code:

1
<a href="javascript:ReplaceContentInContainer('schaalmodellen 1.jpg','tekst behorend bij button 1')">

zoals je dat nu hebt. Dan zou hij de afbeeldingen gewoon moeten vinden.

**csshunter** · 19 mei 2012, 01:32

Hoi Suchard en Jan,
Los van het kunnen vinden van de images: het vervang-script is niet helemaal compleet, en daarom werkt het niet.
In het script kunnen de variabelen div1 en div2 niet gevonden worden, omdat nergens staat wat die betekenen.
Dan kan ook de innerHTML ervan niet veranderd worden.

Dat het bij opening van de pagina desondanks goed lijkt te gaan, komt omdat het eerste duo zonder script in de html staat (test: javascript uitzetten, en pagina openen: dan komt er hetzelfde).

Wat bedoeld wordt: de variabele div1 in het script moet slaan op het element in het html-document dat de id="div1" heeft ("grijp element met id='div1' bij zijn lurven"). Voor de variabele div2 idem dito.
Dat moet er nog even bij gezet worden:

Javascript Code:

1
2
3
4
5
6
function ReplaceContentInContainer(afbeelding,tekst) {
   var div1=document.getElementById('div1');
   var div2=document.getElementById('div2');
   div1.innerHTML = '<img src="'+afbeelding+'" />';
   div2.innerHTML = tekst;
}

(De naam van de variabele is wat anders dan de id die gepakt moet worden. Vaak is het handig om de var dezelfde naam te geven als de id van het element dat gepakt moet worden, maar het hoeft niet.)

=======

Wat verder zwaar aan te bevelen is: gebruik géén spaties in mapnamen en bestandsnamen (en ook geen bijzondere leestekens als accenten e.d.).

Om woorden van elkaar te onderscheiden kan je beter een streepje - of onderstreepje _ gebruiken.
Heb je er spaties in staan, dan moeten die bij een verwijzing namelijk altijd als %20 in de code komen te staan, anders is de URL niet goed.

En dat is niet zo prettig leesbaar, bv:

HTML Code:

1
<img src="images/headers/decoratief schilderwerk button over.jpg" ... />

moet worden:

HTML Code:

1
<img src="images/headers/decoratief%20schilderwerk%20button%20over.jpg" ... />

Dan bv. beter:

HTML Code:

1
<img src="images/headers/decoratief-schilderwerk_button-over.jpg" ... />

=======

O, ook in een id en name van een element mogen geen spaties gebruikt worden: zwaar verboden!

Dus niet:

HTML Code:

1
<img id="decoratief schilderwerk h" ... />

maar:

HTML Code:

1
<img id="decoratief-schilderwerk-h" ... />

of met hoofdletters gaan werken:

HTML Code:

1
<img id="decoratiefSchilderwerkH" ... />

Met vriendelijke groet,
CSShunter

**Suchard** · 21 mei 2012, 18:15

Logisch, maar ja, dat is het vaak achteraf ;-)

Weet je ook, of het mogelijk is om een deel van de tekst een link te geven?

http://www.decorator.nl/schaalmodellen.html

**csshunter** · 22 mei 2012, 00:13

Ja achteraf is javascript altijd heel ontzettend vreselijk logisch: javascript is pure logica, en als je het ziet, zeg je "ja!".
Maar kom er maar eens achter als je eigen logica niet werkt!

Bv. met het javascript-tutorial van w3schools: www.w3schools.com/js/default.asp.

Hier had het bv. ook kunnen zijn:

Javascript Code:

1
2
3
4
5
6
function ReplaceContentInContainer(afbeelding,tekst) {
   var groteJongen=document.getElementById('div1');
   var kleineMeid=document.getElementById('div2');
   groteJongen.innerHTML = '<img src="'+afbeelding+'" />';
   kleineMeid.innerHTML = tekst;
}

Want hoe je een variabele noemt, wordt geheel aan je fantasie overgelaten: als je steeds maar dezelfde var oproept als die je gedefinieerd hebt.
Het had zelfs zo gekund, met de namen van de var's omgedraaid t.o.v. de id's:

Javascript Code:

1
2
3
4
5
6
function ReplaceContentInContainer(afbeelding,tekst) {
   var div2=document.getElementById('div1');
   var div1=document.getElementById('div2');
   div2.innerHTML = '<img src="'+afbeelding+'" />';
   div1.innerHTML = tekst;
}

Niet zo handig, en tegen alle haren in van het menselijk begrijpertje, maar in de formele logica werkt het net zo goed!

=======
NB:
Je kan trouwens het eerst benoemen en daarna weer ophalen van de twee variabelen ook weghalen en het direct laten doen:

Javascript Code:

1
2
3
4
function ReplaceContentInContainer(afbeelding,tekst) {
    document.getElementById('div1').innerHTML = '<img src="'+afbeelding+'" />';
    document.getElementById('div2').innerHTML = tekst;
}

Maak je dat er van in je huidige pagina, dan werkt het meteen ook feilloos: leuk om te klikken!

=======

Weet je ook, of het mogelijk is om een deel van de tekst een link te geven?

Je bedoelt in de tekst van het onderschrift? Ja, dat kan (in principe).
In de praktijk wordt het wat lastig, dan moet het in de opdrachtregel in de html gepropt worden; iets in de richting van:

HTML Code:

1
<a href="javascript:ReplaceContentInContainer('images/pf-schaalmodellen/schaalmodellen-1.jpg','Zakkendragershuisje te Schiedam i.o.v. &lt;a href=&quote;http://www.beeldengieterijtenax.nl&quote;&gt;Tenax Beeldengieterij&lt;/a&gt; / VVV Schiedam')"><img src="images/pf-schaalmodellen/button-schaalmodellen-1.jpg" alt="button 1" width="70" height="45" class="buttons" /></a>

Met wat aanpassing aan het script is dat denkelijk wel eenvoudiger te maken.
Je zou ook een andere html-structuur met andere css en een ander javascript kunnen gebruiken om het geheel wat overzichtelijker en makkelijker aanpasbaar te krijgen.

Met vriendelijke groet,
CSShunter

**Suchard** · 22 mei 2012, 14:59

Hoi CSS hunter,

Ik heb de code vervangen met bovenstaande, maar het werkt nog niet.
www.decorator.nl/schaalmodellen (button 2)

Ik wil niet al te veel aanpassen, want mijn kennis van css en javascript is niet heel uitgebreid, zonder deze site zou het mij niet lukken.

En eigenlijk zou ik ook willen dat de link ook in een nieuw venster opent, dat is TARGET="_blank", maar ik weet niet waar ik deze code voor/achter moet plakken. Maar misschien eis ik dan teveel van css.

**csshunter** · 23 mei 2012, 03:04

Ha Suchard,
Hij werkt niet om twee redenen:

1.
Ik had de code voor het bijschrift uit de losse pols opgeschreven en niet exact opgesteld en getest. De code voor de links in een bijschrift moet net even anders.
Het moet zijn:

HTML Code:

1
2
<a href="javascript:ReplaceContentInContainer('images/pf_schaalmodellen/schaalmodellen_2.jpg','Zakkendragershuisje te Schiedam i.o.v. <a href=\'http://www.beeldengieterijtenax.nl\' target=\'_blank\'>Tenax Beeldengieterij<\/a> / VVV Schiedam')">
<img src="images/pf_schaalmodellen/button_schaalmodellen_2.jpg" alt="button_2" width="70" height="45" class="buttons"/></a>

Hier zit het target="_blank" voor een nieuwe pagina ook bij: dat kan dus.

De backslashes \ die er in zitten zijn voor javascript nodig als escape-signalen, dwz. het teken dat erachter komt (hier: een enkel aanhalingsteken) moet niet als script uitgevoerd worden, maar blijft een letterteken. Op deze manier kan het, maar het is wel onhandig, en je maakt gauw vergissingen als je er een stel moet doen.

2.
Jij hebt de aanvulling op het script met de definitie van de div1- en div2-variabelen nog niet doorgevoerd/geüpload, en dan doet het hele verwissel-circus het niet (ook niet voor de andere buttons).

=====
Zet je deze twee dingen er in, dan draait ie (en de andere verwisselingen doen het dan ook):

Test: schaalmodellen-nw-1.htm

=====
Maar ik vind het een vrij monsterlijke manier van noteren op deze manier, vooral als je nog iets extra wilt doen in de bijschriften.
En ... het kan anders!
Met een wat ander javascript kan alles veel overzichtelijker bij elkaar komen te staan. In de html wordt het dan:

HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="sidebar1" id="imgReeks">
    <ul>
        <li id="img1">
            <a href="images/pf_schaalmodellen/schaalmodellen_1.jpg" onclick="toonGroot(1); return false;">
            <img src="images/pf_schaalmodellen/button_schaalmodellen_1.jpg" alt="" /></a>
            <p>Zakkendragershuisje te Schiedam</p>
        </li>
        <li id="img2">
            <a href="images/pf_schaalmodellen/schaalmodellen_2.jpg" onclick="toonGroot(2); return false;">
            <img src="images/pf_schaalmodellen/button_schaalmodellen_2.jpg" alt="" /></a>
            <p>Zakkendragershuisje te Schiedam i.o.v. 
                <a href="http://www.beeldengieterijtenax.nl/" target="_blank">Tenax Beeldengieterij</a> / 
                <a href="http://www.ontdekschiedam.nu/" target="_blank">VVV Schiedam</a></p>
        </li>
        <li id="img3">
            <a href="images/pf_schaalmodellen/schaalmodellen_3.jpg" onclick="toonGroot(3); return false;">
            <img src="images/pf_schaalmodellen/button_schaalmodellen_3.jpg" alt="" /></a>
            <p>Oude Stadhuis te Schiedam i.o.v. 
                <a href="http://www.beeldengieterijtenax.nl/" target="_blank">Tenax Beeldengieterij</a> / 
                <a href="http://www.ontdekschiedam.nu/" target="_blank">VVV Schiedam</a></p>
        </li>
        ... enz.
    </ul>
</div>

Werkt als volgt:

De reeks buttons zit als lijstje <ul> in de html, en de list-items <li> zijn telkens het geheel voor een button + bijbehorende grote + bijbehorend onderschrift.
Hiermee zit alles wat bij elkaar hoort ook bij elkaar, en uitbreiden met een nieuwe foto gaat ook makkelijk: gewoon hetzelfde doen.
Afwijking met de vorige methode is dat er nu een echte link naar de grote afbeelding in zit.
Als javascript aan staat, werkt die niet, dan werkt de onclick-functie.
Als javascript uit staat in de browser van de bezoeker, dan kan deze nu toch op de button klikken om de grote te zien. Deze komt alleen op een nieuwe pagina te staan ipv op dezelfde pagina, en mist het bijschrift. Om van de vergroting weer terug te gaan naar het overzicht, kan de terug-knop van de browser gebruikt worden.
Dan volgt het img van de button.
Daaronder staat in een <p>-regel het onderschrift. Daar kan je links in verwerken, of stukjes vet of cursief in maken, of wat je maar wilt: alle html binnen een <p> is daarin toegestaan.
De truc: die <p>-regel wordt met css onzichtbaar gemaakt, maar het javascript kan er wel bij. Het script kan wat er in die <p> zit ophalen, en gebruiken om er het onderschrift bij de grote plaat van te maken.
Belangrijk is dat elk list-item begint met zijn goede volgnummer in de id:
<li id="img1">, <li id="img2">, <li id="img3">, enz.
Dit moet precies zo opgeschreven worden, anders werkt het niet.
Vervolgens moet het nummer uit het volgnummer-id genoteerd worden in de aanroep van het script:
onclick="toonGroot(1); return false;",
onclick="toonGroot(2); return false;",
onclick="toonGroot(3); return false;", enz.
De return false moet erbij om na het doen van de functie (wisselen naar de nieuwe grote) niet ook nog eens de link op te volgen die in deze <a> staat.
Als javascript uit staat (en de wisselaar niet werkt), dan doet ook die return false het niet, en komt de kijker dus bij de grote op een nieuwe pagina uit.
De nummers van de grote foto's en de buttons hoeven niet perse gelijk op te gaan met de id-volgnummers. Alleen de id-volgnummers moeten steeds kloppen op de toonGroot()-nummers. Voor de rest kan je alles gebruiken wat je maar wilt, dus ook bv. naderhand een button nr.6 met zijn grote verschuiven naar plaatsje 4 in de lijst, enz.

=======
De aangepaste versie van het script is nu geworden:

Javascript Code:

1
2
3
4
5
6
function toonGroot(n){
    var imgSrc=document.getElementById('img'+n).getElementsByTagName('a')[0].href;
    var ditBijschrift=document.getElementById('img'+n).getElementsByTagName('p')[0].innerHTML;
    document.getElementById('div1').innerHTML = '<img src="'+imgSrc+'" alt="" />';
    document.getElementById('div2').innerHTML = ditBijschrift;
}

Het script kan je het beste onderaan in de html zetten, vlak voor de </body>.
Werkt als volgt:

function toonGroot(n) = de n staat voor het getal dat telkens in de html-code is opgegeven.
document.getElementById('img'+n) = zoek het list-item op met de id van het opgegeven volgnummer n.
.getElementsByTagName('a') = zoek binnen dat list-item naar alle elementen <a>.
.getElementsByTagName('a')[0] = en pak daarvan de allereerste die je tegenkomt (javascript-nummering begint altijd met 0 ipv 1!).
.getElementsByTagName('a')[0].href = en pak daarvan de link naar de grote afbeelding die in de href-eigenschap van die <a> staat.
Die href-link is dus uiteindelijk de inhoud van de variabele imgSrc.
Voor het bijschrift geldt iets dergelijks.
Pak weer het betreffende volgnummer, maar dan de inhoud (innerHTML) van wat in de <p> van dat list-item staat; en noem dat: ditBijschrift.
Nu zijn de twee gegevens bekend die we nodig hebben voor de grote: waar ie vandaan moet komen, en wat er onder moet komen te staan.
Dat zijn de laatste twee regels van het script: eerst wordt de <div id="div1"> gevuld met de grote, en dan de <div id="div2"> met het bijschrift.
Klaar is Keessie.

=======
Dat wil zeggen: ook nog een paar aanvullinkjes in de css om alles in de opmaak op de goede plek te krijgen:

Code:

/* ===== css-aanvullingen ===== */

#imgReeks ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}
#imgReeks li {
	float: left;
	display: inline;
	margin: 14px 14px 0 0;
	padding: 0;
	}
#imgReeks img { /* hoeft nu niet meer bij elke button apart in de html */
	width: 70px;
	height: 45px;
	}
#imgReeks p { /* onzichtbaar maken */
	position: absolute;
	left: 0;
	margin-left: -9999px;
	}

=======
Tot hier gekomen?

Dan komt:

Test 2: de nieuwe versie in actie, schaalmodellen-nw-2.htm

=======
Los van script enzo: het lijkt me de moeite lonen om voor de grote afbeeldingen wat scherpere en contrastrijker foto's te gebruiken. Vooral bij daglicht zijn de afbeeldingen moeilijk te zien.
Ook zou je een lichtgrijs achtervlak om de foto's heen kunnen zetten, zodat je niet "tegen het licht in" hoeft te kijken van het felle wit van de pagina-background.

Een voorbeeldje van het effect heb ik er in test 2 bij gezet als laatste button.
Voor deze illustratie is het javascript wat uitgebreid; in de definitieve versie kan dat er gewoon uit.
Nu zie je ook duidelijker aan het vergelijkings-lucifertje hoe klein het eigenlijk is: *)
prachtig priegelen op de vierkante mm! Mooi werk!

Met vriendelijke groet,
CSShunter
_____________
*) Toen ik dit zag bij daglicht:

... dacht ik dit:

... maar het is dit:

Dat is dus 3,5 keer zo klein!

**Suchard** · 26 mei 2012, 17:52

Hoi CSS Hunter,

Na 3 dagen zonder internet gezeten te hebben (aarrrhgg) kon ik vandaag eindelijk weer aan de slag.

Je bent echt een orakel, ik heb de laatste aanpassingen (denk ik, maar waarschijnlijk niet) doorgevoerd.
Maarrr, de footer drijft nu naar links buiten de container. En de javascript aanpassingen (die nu onderin de html staan) zijn zichtbaar. En de grote foto's zijn verdwenen.

Nog bedankt voor het compliment, het was me een heel werk. Maar ik ben er ook best trots op, daar ben ik iets beter in dan sites bouwen ;-) Foto's komen later wel, eerst maar eens de site laten werken, die fotos, zijn dan een piece of cake.

**csshunter** · 27 mei 2012, 02:13

Hoi Suchard,
Ja, er gebeuren allerlei merkwaardige dingen.

Maar niet geheel onverklaarbaar!

1. CSS
Bij het knip en plakwerk in de css is iets mis gegaan. Er staat nu:

Code:

#div1 {
	height: 520px;
	width: 743px;
	#imgReeks ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

Daar mist een essentiële afsluit-accolade van de #div1, waarmee de #imgReeks ul zijn/haar werk niet kan doen; zo wel:

Code:

#div1 {
	height: 520px;
	width: 743px;
	}
#imgReeks ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

2. HTML
Dat de grote foto niet verschijnt, is ook redelijk wel verklaarbaar: de hele <div> met de content (en de start-foto met bijschrift) staat niet op de pagina.

HTML Code:

1
2
3
4
<div class="content">
    <div id="div1"><img src="images/pf_schaalmodellen/schaalmodellen_1.jpg" width="743" height="520" alt="pf schaalmodellen 1" /></div>
    <div id="div2">Zakkendragershuisje te Schiedam i.o.v. Tenax Beeldengieterij / VVV Schiedam</div>
</div>

3. Javascript
Ook daar is de schaar wat uitgegleden bij het knippen.
De javascript-code staat nu zonder blikken of blozen tussen de html-code:

Code:

<!-- end .container --></div>
function toonGroot(n){
    var imgSrc=document.getElementById('img'+n).getElementsByTagName('a')[0].href;
    var ditBijschrift=document.getElementById('img'+n).getElementsByTagName('p')[0].innerHTML;
    document.getElementById('div1').innerHTML = '<img src="'+imgSrc+'" alt="" />';
    document.getElementById('div2').innerHTML = ditBijschrift;
}</body>
</html>

Dan weten de browsers niet beter dan dat het tekst is die op de pagina vertoond moet worden; en die tonen ze dan ook.
Er moet nog bij verteld worden dat het javascript is:

Code:

<!-- end .container --></div>
<script type="text/javascript">
// <![CDATA[
function toonGroot(n){
    var imgSrc=document.getElementById('img'+n).getElementsByTagName('a')[0].href;
    var ditBijschrift=document.getElementById('img'+n).getElementsByTagName('p')[0].innerHTML;
    document.getElementById('div1').innerHTML = '<img src="'+imgSrc+'" alt="" />';
    document.getElementById('div2').innerHTML = ditBijschrift;
}
// ]]>
</script>
</body>
</html>

Nu moeten ze wel, die domme browsers!

Zou het zo lukken?

Met vriendelijke groet,
CSShunter
___________
PS: ik zie dat ik niet de laatste versie van m'n schaalmodellen-nw-2.htm had geüpload.

In de oude versie stonden nog wat overtollige regels javascript (die nu ook weer geen kwaad konden).
Intussen hersteld: nu staat de nieuwe er op.
En eigenlijk horen er ook "cdata" regels bij, die vertellen dat het in geen geval html is wat er binnen het <script> ... </script> staat. Dat voorkomt eventuele problemen met html-tekens als <, die het begin van een tag zijn; en de html-validator vindt het ook prettiger.
(Nu zijn er nog maar 18 Errors te verhelpen ipv de eerdere 43 Errors, 22 warnings.

)

**Suchard** · 27 mei 2012, 08:20

Super bedankt voor je hulp, het is goed gekomen.
Ik had er nog ergens een <div> teveel staan, waardoor het allemaal naar links onder dreef, maar dat is nu ook opgelost.

Nog een klein vraagje:

Code:

<li id="img2">
            <a href="images/pf_schaalmodellen/schaalmodellen_2.jpg" onclick="toonGroot(2); return false;">
            <img src="images/pf_schaalmodellen/button_schaalmodellen_2.jpg" alt="" /></a>
            <p>Zakkendragershuisje te Schiedam i.o.v. 
                <a href="http://www.beeldengieterijtenax.nl/" target="_blank">Tenax Beeldengieterij</a> / 
                <a href="http://www.ontdekschiedam.nu/" target="_blank">VVV Schiedam</a></p>
        </li>

De tekst voor de zoekmachine (zakkendragershuisje schiedam)voor de grote afbeelding komt die nu tussen de "" na alt= of geldt die dan alleen voor de button? En mag die wel met spaties?

Groetjes Susanne

**csshunter** · 30 mei 2012, 03:40

Hoi Susanne,

Eerst het antwoord op je vragen, dan een intermezzo, en daarna wat algemene Google-beschouwingen.

De tekst voor de zoekmachine (zakkendragershuisje schiedam) voor de grote afbeelding komt die nu tussen de "" na alt= of geldt die dan alleen voor de button?

Ja, je kan die tekst in de alt van de button zetten, maar dan geldt die inderdaad alleen voor de button zelf.
Om de tekst aan de grote afbeelding zelf vast te knopen kan je twee andere dingen doen (en/of):

Een title="Zakkendragershuisje Schiedam" toevoegen aan de link <a> naar de grote afbeelding.
Deze woorden als tekst toevoegen binnen de <a>: <a ...>Zakkendragershuisje Schiedam</a>. Als je dat laatste doet, wordt de tekst zichtbaar, en komt tussen de buttons te staan: dat moet niet! De tekst moet dus vervolgens weer op het scherm verborgen worden, door er een <span> omheen te zetten en deze met css buiten beeld te plaatsen.

En mag die wel met spaties?

Jazeker, want hier staan de woorden binnen de aanhalingstekens van de alt="...", en binnen de aanhalingstekens van een attribuut mogen (in principe) losse woorden met spaties gebruikt worden. Met een title="..." mag dat ook.

NB: bij een id="..." mag het niet. Dat komt omdat een ID onderdeel uitmaakt van het "DOM" (Document Object Model) en als een soort variabele gebruikt kan worden
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). Zie hier bovenaan in de html-specificatie.

=======

Intermezzo
Maar op deze manier krijg je nog geen optimale resultaten voor zoekmachines.

De bedoeling zal immers niet (alleen) zijn om de grote afbeelding in de afbeeldingen-resultaten van Google te krijgen, maar om de pagina zelf hoog te laten scoren op de woorden "Zakkendragershuisje Schiedam".
Dan komen (be)zoekers op je site, i.p.v. de afbeelding te vinden te midden van de (hm) 519 resultaten als je op deze woordencombinatie door Google laat zoeken in de afbeeldingen.

NB: Ga je deze resultaten doorscrollen, dan komt momenteel het schaalmodel niet tevoorschijn.
Wel de afbeeldingen "potlood-groot.png" en "lucifer-klein.png" van m'n reactie nummer #9 hierboven!
Google heeft deze gevonden omdat in de tekst van deze helpmij-pagina de woorden gebruikt worden.
Laat je Google specifiek op afbeeldingen met deze trefwoorden zoeken op alleen de decorator-site, dan komt er (op dit moment) niets tevoorschijn.

Als je Google laat zoeken op Zakkendragershuisje Schiedam, zonder aanhalingstekens (dus niet als exacte woordcombinatie, dan komen er nog meer afbeeldingenresultaten: 2.460 resultaten.

Hier zit je schaalmodel wel bij (evenals de potlood-en luciferafbeelding).
Oorzaak: in je tekst staat "Zakkendragershuisje te Schiedam", en door het "te" kan Google het niet vinden op de exacte combi "Zakkendragershuisje Schiedam".

Maar ... wil je eigenlijk wel gevonden worden door mensen die op zoek zijn naar het Zakkendragershuisje in Schiedam?
Het zal je vooral gaan om mensen die op zoek zijn naar schaalmodellen: en het Zakkendragershuisje en de andere schaalmodellen op decorator.nl zijn alleen maar voorbeelden. Wie een schaalmodel wil laten maken (bij Decorator), zoekt helemaal geen Schiedammer gebouwen!
Het zou puur toeval zijn als iemand op zoek is naar een schaalmodellen-vervaardiger, en dan "Zakkendragershuisje" of "Jenevermuseum" in zijn of haar zoekvenstertje intikt. - Dat gebeurt natuurlijk nooit.

Het belangrijkste trefwoord op deze pagina Schaalmodellen (www.decorator.nl/schaalmodellen.html) moet dus worden: "Schaalmodel".
Wat ziet Google nu op deze pagina?
Dat is het volgende aan tekst:

Code:

--------------------------------------------------------------------------------
header stripe_1 [1][home_button up.jpg]
   [2][decoratief_schilderwerk_button_up.jpg]
   [3][objecten_ornamenten_button_up.jpg] [4]schaalmodellen_h
   [5][bedrijfsprofiel_button_up.jpg] [6][contact_button_up.jpg] space_h
   [7][twitter_button_up.jpg] stripe_2
     * Zakkendragershuisje te Schiedam i.o.v. [8]Tenax Beeldengieterij /
       [9]VVV Schiedam
     * Zakkendragershuisje te Schiedam i.o.v. [10]Tenax Beeldengieterij /
       [11]VVV Schiedam
     * Oude Stadhuis te Schiedam i.o.v. [12]Tenax Beeldengieterij /
       [13]VVV Schiedam
     * Oude Stadhuis te Schiedam i.o.v. [14]Tenax Beeldengieterij /
       [15]VVV Schiedam
     * [16]Jenevermuseum te Schiedam i.o.v. [17]Tenax Beeldengieterij /
       [18]VVV Schiedam
     * [19]Jenevermuseum te Schiedam i.o.v. [20]Tenax Beeldengieterij /
       [21]VVV Schiedam
     * Molen [22]De Nieuwe Palmboom te Schiedam i.o.v. [23]Tenax
       Beeldengieterij / [24]VVV Schiedam
     * Molen [25]De Nieuwe Palmboom te Schiedam i.o.v. [26]Tenax
       Beeldengieterij / [27]VVV Schiedam
     * Korenbeurs te Schiedam i.o.v. [28]Tenax Beeldengieterij / [29]VVV
       Schiedam
     * Korenbeurs te Schiedam i.o.v. [30]Tenax Beeldengieterij / [31]VVV
       Schiedam

   pf_schaalmodellen_1
   Zakkendragershuisje te Schiedam i.o.v. [32]Tenax Beeldengieterij /
   [33]VVV Schiedam
   [34]stripe f [footer_disclaimer_up.jpg] space_f
--------------------------------------------------------------------------------

Wat Google kan waarnemen, is nl. hetzelfde als wat een pure tekst-browser weergeeft. Zie het resultaat van de Lynx-viewer, waaruit het bovenstaande is gekopieerd.

De header stripe_1 e.d zijn de alt's bij de lijntjes voor de opmaak (dat kunnen dus beter lege alt's zijn: alt="").
De cijfers [1], [2] enz. zijn de volgnummers van de links op de pagina (die later terugkomen in het link-lijstje).
De [home_button up.jpg] enz. zijn de namen van de button-afbeeldingen (die geen alt hebben).
De sterretjes * zijn de list-items <li> van de buttons, die in een keurige <ul>-lijst zitten.

Wat we hieruit kunnen opmaken:

Het woord "schaalmodel(len)" zit in menu-link nummer [4].
Het zit ook in pf_schaalmodellen_1, dwz. de eerste grote afbeelding van het Zakkendragershuisje die getoond wordt bij opening van de pagina.
Verder komt het woord "schaalmodel" in de hele tekst van de pagina niet voor!
Het woord "Schaalmodellen" zit wel in de <title> van de pagina.
Maar in de pagina-tekst kan Google nergens uit opmaken dat "Schaalmodellen" de huidige pagina is! (de andere kleur in het menu is voor de Google-bot niet te zien, want die heeft geen oogjes)

Al met al zal deze pagina dus niet erg hoog scoren op de 211.000 resultaten die Google vindt op het woord "Schaalmodel", of de 302.000 resultaten die Google vindt op "Afbeeldingen > Schaalmodel".

De link-lijst die Google kan waarnemen is:

Code:

--------------------------------------------------------------------------------
References
   Visible links:
   1. www.decorator.nl/home.html
   2. www.decorator.nl/decoratief_schilderwerk.html
   3. www.decorator.nl/objecten_ornamenten.html
   4. www.decorator.nl/schaalmodellen.html
   5. www.decorator.nl/bedrijfsprofiel.html
   6. www.decorator.nl/contact.php
   7. twitter.com/#!/I_am_decorator
   8. t/m 33: allemaal externe links, 
      waarvan 11 identieke links naar www.beeldengieterijtenax.nl (!)
      en 11 identieke links naar www.ontdekschiedam.nu (!)
  34. www.decorator.nl/schaalmodellen.html

   Hidden links (alleen via de button-afbeeldingen):
  35. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_1.jpg
  36. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_2.jpg
  37. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_3.jpg
  38. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_4.jpg
  39. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_5.jpg
  40. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_6.jpg
  41. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_7.jpg
  42. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_8.jpg
  43. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_9.jpg
  44. www.decorator.nl/images/pf_schaalmodellen/schaalmodellen_10.jpg
--------------------------------------------------------------------------------

Hiermee kan Google dus wel de grote afbeeldingen vinden (maar die verzuipen nogal in het totale aanbod van schaalmodel-afbeeldingen).
Verder valt op dat de overmaat aan links wegleidt uit de decorator-site: van de 34 links die de bezoeker ziet, blijven er 7 op de site, en de rest (80%) verdwijnt het www-heelal in...

=======

Zoekmachine-beschouwingen
Zoekmachines houden niet zo van afbeeldingen. De Google-robot kan wel afbeeldingen vinden, maar de ranking daarvan hangt af van de ranking van (de tekst van) de pagina. De machinerie kan de gevonden afbeeldingen niet beoordelen op kwaliteit, en daarop de ranking aanpassen.
Neem bv. deze die ik vond, ook schaalmodellen van het Zakkendragershuisje:

Een bronskleurig beeldje van het Zakkendragershuisje, te koop bij VVV Schiedam. Totaal uit verhouding, slecht in de details.
KLM miniature number 55, uit de serie Delftsblauwe KLM-huisjes (reizigersgeschenken met jenever-inhoud, zie ook deze). Het open torentje is helemaal verfomfaaid omdat er een kurk op moest passen.

Die staan hoger in de Google-resultaten op "Zakkendragershuisje > Afbeeldingen", maar halen het op geen stukken na bij de precisie van jouw model:

Geen van tweeën heeft bv. het rare asymmetrische vlak in de dakpannen (aan de ene dakzijde wel, aan de andere kant niet), dat op jouw model en de foto's van de werkelijkheid duidelijk te zien is.

Hierbij komt ook nog, dat Google eigenlijk niet goed raad weet met afbeeldingen. Vanwege de blindheid van de Google-bot worden er veel meer afbeeldingen getoond dan waarom gevraagd werd: een overmaat aan afbeeldingen die totaal niet ter zake doen.
En soms zelfs met weglating van de afbeelding waar wel om gevraagd werd!

Zie in dit topic: Google's afbeeldingen-zoeken beleid

Kortom, alles wijst maar één kant op:

Aan Google moet je niets laten zien, tegen Google moet je praten!

=======

Hoe pak je dat aan?
Voor sites die het vooral van de zeggingskracht van hun beelden moeten hebben, is dat best lastig. De afbeeldingen zouden voor zich moeten spreken, en geen tekst nodig moeten hebben. Helaas, dan kan Google ze niet vinden.
Behalve het toevoegen van tekst zijn daar ook nog een paar andere technieken voor.

Leesvoer alvast: een trefwoorden-test, het resultaat, en Over trefwoorden en zoekwoorden.

Op de concrete praktijk voor de schaalmodellen-pagina zal ik in een volgende reactie terugkomen.

Wordt vervolgd!
Met vriendelijke groet,
CSShunter

Edit:
Oeps!

- Dat vervolg is er niet meer van gekomen, zie ik (10-08-2012). Sorry!

Onderwerp: Hoe verwissel ik een afbeelding tegelijkertijd met een stuk tekst?

Onderwerp opties

Zoek in onderwerp

Vraag is niet opgelost

Hoe verwissel ik een afbeelding tegelijkertijd met een stuk tekst?

nieuwe wisselaar

Tegen Google moet je praten!

Berichtenregels

Helpmij.nl

Helpmij.nl en business

Contact