byt lankar med html-skolan

Google gbghtml.se
Denna sida använder cookies, läs mer här>>>
index Bodytaggen Logotype Lowsrc Gimp Photoshop Gratis online Table Picasa PicNic Bilder i Forum Videotaggen i HTML 5 Gifar animerade Protect your content with a DMCA.com Protecion BadgeSkydda dina bilder

Några tricks och knep för att förstora eller förminska bilden .

OBS!!! Denna sidan fungerar inte på små skärmar.

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&ouml;r muspekaren &ouml;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);

Denna snutt lägger du alltså i din stylesheet och sedan även en class-tagg i bildtaggen så här: <img src="http://drivrutiner.net/bilder/foto/mat/ankis-korv/korv6.jpg" width="400" height="300" class="grow" /> Du kan läsa mer om stylesheets på design>>>

 

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.

copyright © Björn Larsen citygbg.se