Det händer du blir tvungen att visa bilder som tar tid att öppna sig i besökarens webbläsare. Framförallt om din besökare sitter med ett mobilt nätverk, isdn eller faxmodem. Det kan då ge en fin effekt om du börjar att ladda ett dokument med mindre kvalitet innan det stora kommer upp. Ett gammalt knep är att använda kommandot lowsrc. Du skriver in lowsrc innan src (Nu är bilderna stora för att ge dig en effekt även om du har fiber). Idag använder du hellre stylesheets eller css för att ändra bilden. Vad jag gjort här är att lägga en lättare svart-vit bild som bakgrund i div-taggen och sedan skrivit in en class i stylesheet som ändrar bilden när du hovrar(för muspekaren över bilden). Så här:
Som du ser får du fram färgerna när du för muspekaren över.
Vad jag gjort här är att skriva in en tagg i stylesheet som ser ut så här:
.byt-bild{
background-image: url(../bild/lowsrc/chili.jpg);
width:1200px; /*bredden på bilden*/
height:900px; /*höjden på bilden*/
}
.byt-bild:hover{
background-image: url(../bild/png/chili.png);
} och sedan lagt en class i div-taggen ovanför så här: <div class="byt-bild">. Som du ser ligger en chili.jpg som bakgrundsbild i div-taggen och sedan när du hovrar över bilden ändrar den till en annan chili.png istället. Jag länkar bilden till chili.png så här <a href="png/chili.png"> . Hela koden för hovringen ovanför ser ut så här:
<div class="byt-bild"><a href="png/chili.png"><font size="+6">För muspekaren över bilden</font></a></div> och då skall du alltså ha lagt de taggarna du ser ovanför i din stylesheet. Du ser mer om stylesheet på design>>>
Detta innebär att bilden chilli.jpg, som är en mycket lättare bild laddar innan chilli.png som väger många gånger mer än den lätta jpg bilden.
Ett annat sätt kan vara att lägga en mindre lättare bild i taggen och sedan via css förstora bilden du vill visa. Vi kan då använda en class så här:
.grow:hover {
-webkit-transform: scale(2.0);
-ms-transform: scale(2.0);
transform: scale(2.0);
Du kan även använda ett gammalt kommando onmouseover och onmouseout. OBS!!! Nu är detta stora tunga bilder så du kan ha svårt att se effekten om du sitter med en långsammare internet-anslutning. Skall du anpassa bilderna till en långsammare anslutning får du, helt enkelt, göra dem ännu mindre.
Vad vi gör här är att visa bilden när du för muspekaren(hovrar) över bilden. Den lilla bilden är korv6.jpg och den stora korv6.png. Koden ser ut så här:
<a href="korv6.jpg"><img src="korv6.jpg" onmouseover="this.src='korv6.png'" onmouseout="this.src='korv6.jpg'" /></a> Du kan ändra bilden onmouseout till korv6.png och får då den stora bilden kvar när du tar ut musen igen.
Du skulle även kunna göra detta med en svartvit bild så här:
Då får vi samma effekt som den ovanför med ett kommando i stylesheet istället. Koden ser ut så här: <a href="korv3.png" target="_blank"><img src="korv3-grey.jpg" onmouseover="this.src='korv3.png'" onmouseout="this.src='korv3-grey.jpg'" /></a> . Som du ser är bilden korv3-grey.jpg kvar på onmouseout så bilden ligger alltså kvar för dig som redan har fört muspekaren över bilden. Som du ser ligger det även en länk till bilden korv3.png så när du klickar på bilden öppnar du endast bilden i ett nytt fönster(target="_blank"). Läs mer om target på länkar>>>
Vi gick igenom bilder på denna sidan i samband med p-taggen, och här i samband med bild från annan sida, här i samband med länkning plus här ihop med tabell.
På sidorna under bild hittar du lite användningsområden för bilder. Vi börjar med att lägga in en bild i body-taggen, sedan lägger vi även ut bilder i en tabell. På denna sidan är även några länkar till tips om photoshop. Som nog är det populäraste programmet just nu för att redigera bilder till hemsidan.
Innan du tittar här kan du ha nytta av lektionerna om tabell som du hittar på dessa sidorna.