Het a/img probleem oplossen

1 mei 2009, 16:03 | Permalink ∞

Ik heb vorige week eindelijk een oplossing gevonden voor een probleem waar ik al heel lang mee zat, en dat niemand leek op te kunnen lossen. Het is een beetje complex om uit te leggen, dus ik heb er maar een screencast van gemaakt, die je hieronder kan afspelen. Ik ga toch een tekstuele poging doen:

Als je borders gebruikt in plaats van text-decoration: underline; om je links te stijlen, dan krijg je de border rond een gelinkte <img> niet weg met CSS. Aangezien CSS enkel sequentieel van “boven naar onder” kan gaan (d.w.z. van je <body> tot het diepste element, maar niet meer terug, moeten we hier naar javascript grijpen om het probleem op te lossen. De code hiernaast kijkt na voor elke image of dat het bovenliggende element een link is, en als dat zo is, wordt dynamisch de CSS-klasse linkedImage toegevoegd.

Dit is het stukje javascript dat ik daarvoor gebruik in de screencast (jQuery):

$(document).ready(function() {

	// Fix the a/img problem
	$(".content img").each(function() {
		var parentTag = $(this).parent().get(0).tagName;
		if (parentTag == 'A') {
			$(this).parent().addClass('linkedImage');
		};
	});

});

Die klasse kan je dan stijlen naargelang je wensen: soms wil je helemaal geen borders, soms wil je het duidelijker maken dat iets “zoomable” is (door bvb. een icoontje of een tekst. Een idee dat ik heb om dit verder uit te werken is bvb. de volgende CSS:

		a.linkedImage {
			border: none;
			display: block;
			font-size: 11px;
			color: #808080;
		}

		a.linkedImage img {
			display: block;
		}

		a.linkedImage:after {
			content: "Click the image for a larger version";
		}

Dat geeft dan als resultaat dat er een kleine grijze tekst onder image staat die aanduid dat je op de img kan klikken. Op images zonder link staat dit dan uiteraard niet.

Dit was een beetje een technische post, maar ik ben er zeker van dat een groot deel van mijn publiek volledig kan volgen ;). Als laatste nota wil ik wel meegeven dat je dit best situationeel toepast – op een kleine site, ok, maar je wilt dit echt niet op een fotopagina met 20 foto’s en 20 avatars gaan doen op een high traffic site als pakweg Netlog of ABConcerts.

P.S. Ik heb een geluidstechnicus nodig ;)

8 reacties op “Het a/img probleem oplossen”

Nick zei:

Bedankt voor de tip! Een scriptje dat ik in de toekomst zeker wel eens zal gebruiken. *save to delicious*

En aangezien je zelf zegt “dat was de tip van de week”, neem ik aan dat er nog meer van dit soort screencasts aankomen. Leuk initiatief, ik kijk er naar uit.

1 mei 2009 at 16:27
admin zei:

Als er iemand tips heeft om meer volume uit mijn micro te krijgen, mogen ze dat altijd komen melden :). Ik merk zelf dat ik mijn volume nu nogal hoog moet zetten om me te verstaan.

Ik heb een Samson C01U.

1 mei 2009 at 16:38
Toon zei:

Zelf gebruik ik liefst zo weinig mogelijk javascript voor zulke dingen.
Waarom ken je die border style niet toe aan specifieke elementen:

p a:link, h1 a:link { border: 1px solid red; }

1 mei 2009 at 19:11
Bramus! zei:

Het kan ook korter:

$(document).ready(function() {
// Fix the a/img problem
$(”a:has(img)”).addClass(’linkedImage’);
});

;-)

1 mei 2009 at 19:53
Kaspars zei:

Another solution that I just found is to apply vertical-align:somewhere; to a img where somewhere can be everything except baseline:

a img { border:none; vertical-align:top; background:#fff; }

and it will hide (not remove) the border. The great thing about this solution is that it allows using transparent images and apply padding, margin and even border to a img.

The reason why this works is because both anchors (links) and images by default are inline elements and by applying vertical-align: somewhere; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

1 mei 2009 at 21:20
Xavez zei:

@Toon wat doe je dan met afbeeldingen die binnen een paragraaf staan? ;-). Dit probleem is inderdaad een gekend probleem… :). Thanks voor dat stukje jS! (ook @bramus om het nog korter te maken! ;-))

2 mei 2009 at 10:48
Tom zei:

Over het geluidsprobleem, spreek luider?

Verder kun je normaliseren met Audacity achteraf dan.

2 mei 2009 at 12:00
Greet zei:

Hé verdorie, ik ben dat probleem ook al een paar keer tegengekomen, maar ik kan niet met JavaScript werken (shame on me, ik weet het wel).

3 mei 2009 at 22:53

Reacties gesloten

Het is niet meer mogelijk om reacties te geven op dit bericht. Na plaatsing is het gedurende 2 weken mogelijk om te reageren. Dit om de kwaliteit van de uiteindelijke post hoog te houden en spam tegen te gaan. Mocht je toch nog (persoonlijk) willen reageren, zie de contactpagina.