Bilder på blogg

På DIS chat i dag kom det opp et spørsmål om bilder på bloggen, og hvordan en kan gjøre så de ikke ble klikkbare. Jeg har gjort dette på denne bloggen, stort sett på alle bilder. Dette fordi bildene er illustrasjoner til teksten, og således ikke har noe funksjon alene.

Jeg tenkte å vise hvordan jeg gjør det. Vennligst merk at jeg har lagt til et mellomrom inni html taggene her for at de skal vises som tekst og ikke html kode.

På en blogg, så laster du opp et bilde. Jeg pleier å velge billedstørrelse stor, og enten bruke ingen, venstre eller mindten på utforming, som i praksis sier hvor bildet skal være i forhold til teksten. Det blir individuelt for hver tekst, og man kan variere litt.

Når bildet er lastet opp ser du en tekst som ligner på dette i html koden:

< a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s1600-h/1909__Nekrolog,_Samhold_nr__103.jpg">< img style="cursor:pointer; cursor:hand;width: 182px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s400/1909__Nekrolog,_Samhold_nr__103.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5434700735849679874" />< /a>

Jeg skal bryte dette opp slik at dere forstår hva de enkelte delene er.

1. < a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s1600-h/1909__Nekrolog,_Samhold_nr__103.jpg">

2. < img style="cursor:pointer; cursor:hand;width: 182px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s400/1909__Nekrolog,_Samhold_nr__103.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5434700735849679874" />

3. < /a>

Veldig forenklet så er den første linjen det som skal vises om noen klikker på lenken. Den andre er det som kan klikkes på, altså et bilde, og den siste linjen er en sluttmarkør for lenken, slik at det er det som er mellom < a href... > og < /a> som kan klikkes på.

Jeg tar bort linjene 1 og 3, og står igjen med en < img> tag uten noe som kan klikkes på. Lenken til det store bildet er borte.

< img style="cursor:pointer; cursor:hand;width: 182px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s400/1909__Nekrolog,_Samhold_nr__103.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5434700735849679874" />

Men dere ser at markøren endrer seg når man beveger muspekeren over bildet. Slapp av, bildet er fortsatt ikke klikkbart. Men for å fjerne også dette, så ser dere i < img> taggen at det er en style der.

cursor:pointer; cursor:hand;

Dette sier at pointer skal brukes normalt, men at hand skal brukes ved "mouse-over". Om du tar bort begge disse, så blir bildet helt statisk.

HTML koden helt til slutt ser da slik ut:

< img style="width: 182px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4QmmJNBErH4sMmLYEWNbmmGa8LBs7wxZZU2vvDK36CZAghHsbOQeAwkzmdGgoWp0W5OvRfXjVVt9SQfoWi-bSCOSRuESQxen2ZkFdJSuTq3_MjK3p5TtTLph54zRUOMTu6YxVtmNct7g/s400/1909__Nekrolog,_Samhold_nr__103.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5434700735849679874" />

Alle bildene du laster opp til bloggen blir liggende i et Picasa nettalbum. Ved å gå til Min konto, og deretter Picasa (Nettalbum) så vil du få full tilgang til bildene dine.