KOMPOOS.NL

automatic link icons

home » css » image-effects » automatic-link-icons.html

sitemap

voorbeeld automatische link icons

image-flip.html
image-rotation.html
image-switcher.html
index.html (van /css/image-effects)
magnifier.html
round-image-css.html
rounded-corners-image.html
xml-naar-html.html
index.html (van /php/image-effects/watermark)
watermark.html
edge-detection.html
grayscale-image.html
index.html (van /php/image-effects)
inline-images.html
ronde-afbeelding.html
rotate-transparent-image.html

uitleg automatische link icons

Om een icon (.png of .gif e.d.) aan jouw link te "knopen", moet je even de stylesheet die hieronder staat naar jouw webruimte kopiëren. In de a[href (van de stylesheet) zie je *='/css/' staan. Dit zorgt er voor dat alles achter het is-gelijk-teken (en tussen de aanhalingstekens) zal kunnen matchen met de inhoud van alle hrefs die aan dat criterium voldoen (simpeler gezegd: er wordt vergeleken of die tekst ergens in de href voorkomt). Om wat fijn-maziger te werk te gaan is in dit voorbeeld alleen de a die zal voorkomen in de div .automatic-link benoemd. Het voorbeeld spreekt verder voor zichzelf. Maak een paar graphics (of gebruik een icon-library) en koppel die aan de stylesheet (zoals in dit voorbeeld te zien is). Wil je de graphic aan de rechterkant van de link, verander dan de no-repeat center left in no-repeat center right.

de stylesheet van de automatic link icons


<style type="text/css">
	.automatic-link a[href *='/css/']{
		padding-left:23px;
		background:transparent url(css.png) no-repeat center left}
	.automatic-link a[href *='/php/']{
		padding-left:23px;
		background:transparent url(php.png) no-repeat center left}
</style>
Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.