fredag 11 september 2009
Popupruta för bilder
Skulle du vilja kunna länka dina små bilder i din sidebar till en större bild i en popupruta?
Eller kanske länka en text till en popupbild?
Då ska du göra så här:
Börja med att se till att du har en bild i två storlekar, en liten lagom till din sidebar (ca 200 pixlar om du har en normalbred sidebar) och en större i valfri storlek.
Ladda upp dem på t.ex. Photobucket så att de får en webadress - en direktlänk - vilket är det vi ska använda oss av.
Gå till din bloggs Layoutläge och klicka på Lägg till en gadget, välj HTML/Javascript.
Klistra in följande kod i din ruta:
<a href="http://DINSTORABILDSADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"><img border="0" alt="" src="http://DINLILLABILDSADRESS"/></a>
Byt ut adresserna (de med stora bokstäver + http://) mot respektive bilds direktlänk. Din lilla bilds adress är alltså länken till den bild som ska synas i sidebaren.
I koden finns orden width och hight. Efter dem kommer siffror vilket är pixelmått och de avgör hur stor din popupruta ska vara. Om din bild är säg 500x700 pixlar så byter du förstås ut siffrorna till det. Width mot din bilds vidd, hight mot din bilds höjd.
Dessutom finns ord som scrollbar, menubar, toolbar och status. Du kan byta ut no mot yes eller tvärt om för att anpassa popuprutan efter ditt tycke och smak. Vill du att dina gäster ska kunna surfa vidare från popuprutan - ja då väljer du toolbar=yes. Vill du att de ska kunna lägga till ditt foto bland sina favoriter - ja då väljer du menubar=yes. Prova dig fram till vad som känns bäst.
Spara din gadget.
Om du istället vill ha en vanlig textlänk som leder till en bild ska du använda följande kod:
<a href="http://DIN BILDS ADRESS" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=420, height=350, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;">DIN LÄNKTEXT</a>
Du klistrar in den i en HTML/Javascript gadget precis som med bild/bild-länken.
Nu kan du ju utvidga det här konceptet om du vill. Kanske länka en bild till en text, ett blogginlägg eller till en scrappad layout av samma bild. Du kan länka till vad som helst som har en webadress.