|
|||
Cgi4free |
Egen söktjänst |
Erbjudanden |
Funktioner |
Gratis bilder |
Hemsidekryptering |
Posten |
Söktjänstregistrering |
JavaScript.nu
/
HTML-kurs
/
Bilder
Bilder
Vad vore internet utan bilder? Ganska tråkigt, inte sant? Du ska nu lära dig infoga bilder på din hemsida. Och det är lätt som en plätt. Först vill jag dock passa på att påminna dig om att i princip alla bilder på internet skyddas av upphovsrättslagen. Med det menas kort sagt att du måste fråga sidans ägare innan du får ta hans/hennes bild och använda den på din egen sida.
Om du ser en bild som du tycker om på en annan sajt, kan du "sno" den
genom att trycka med höger musknapp på bilden och
sedan trycka på Save Image As.../Spara bild som....
Om du söker efter bilder bör du besöka
denna sajt
så kommer du att hitta tusentals med bilder, animationer,
småfilmer, knappar etc.
Om du vill infoga en bild på din hemsida skriver du: <IMG SRC="filnamn.bildformat"> Filnamnet är t.ex. hus. Bildformatet är t.ex. gif.
För att göra en länk till en bild, skriv: <A HREF="hus.gif">Se vår sommarstuga</A> I detta fall är bildens namn hus och bilden är gjord i formatet gif. Bilden dyker nu upp i en sida med vit bakgrund och utan text. För att sätta en ram runt bilden behöver du bara infoga den röda texten i raden nedan. <IMG SRC="filnamn.gif" BORDER="4">
Då blir det såhär:
Du kan ändra 4 till vad du vill.
Om du anger ett högre värde än 4 får du en tjockare
ram.
Om du vill ha en text MELLAN 2 bilder, skriv såhär:
<IMG SRC="filnamn.gif" ALIGN="left">
Resultatet blir då:
en text Du kan också centrera texten, alltså så att den hamnar i mitten av bilderna. För att göra det skriver du: <IMG SRC="filnamn.gif" ALIGN="left"> <CENTER>en text</CENTER> <IMG SRC="filnamn.gif" ALIGN="right">
Resultatet blir:
För att centrera en bild ensam skriver du:
Resultatet blir:
För att centrera en bild eller för att flytta den till någon sida av din sida skriver du. <P ALIGN="right"><IMG SRC="filnamn.gif"></P> <P ALIGN="center"><IMG SRC="filnamn.gif"></P> <P ALIGN="left"><IMG SRC="filnamn.gif"></P> (standard)
Resultatet blir:
För att en text ska dyka upp om du drar musen över bilden skriv: <IMG SRC="filnamn.gif" ALT="Denna text kommer att synas">
Resultatet blir (dra musen över bilden för att se resultatet).
Du kan ändra bredd och höjd på bilden genom att infoga WIDTH och/eller HEIGHT (WIDTH=bredd och HEIGHT=höjd) i IMG-taggen. T.ex. skriver du...: <IMG SRC="filnamn.gif" WIDTH="50" HEIGHT="100"> ...För att nå detta resultat:
Värdet kan också anges i %.
Att ha WIDTH- och HEIGHT-attribut i IMG-taggen är otroligt bra för att sidan ska ladda mycket snabbare. Läs mer om det under layouttips.
Om du har en väldigt stor bild på sidan så kan du låta en mindre (räknat i kilobyte, inte storleksmässigt (=hur stor yta den tar på skärmen)) bild ladda in först så att besökaren ska se vad bilden föreställer och så att den riktiga bilden kommer in senare. Detta gör du genom att skriva in detta: <IMG SRC="storbild.gif" LOWSRC="litenbild.gif" Det som händer är att först så kommer "litenbild.gif" att visas och sedan kommer "storbild.gif" att visas.
OBS: Om någon av bilderna är animerade kommer den att visas hela tiden,
så ha INTE en animerad bild som "LOWSRC", eftersom bara den kommer att visas.
Det som jag ska lära ut nu kan vara svårt om du är nybörjare på HTML. Jag råder dig att avvakta från att läsa om du nyss börjat med HTML (alternativt kan du läsa fast inte bli sur om du inte förstår :) ).
Som du (säkert) vet skriver man...
Nedan ser du koden för figuren jag har ovan (textfärgen=figurens färg): <MAP NAME="figur1"> <AREA SHAPE="rect" COORDS="0,0,51,51" HREF="rektangelsidan.html"> <AREA SHAPE="circle" COORDS="91,26,26" HREF="cirkelsidan.html"> <AREA SHAPE="poly" COORDS="145,0,124,41,124,51,185,51,185,43,166,43,145,0" HREF="enfigursidan.html"> </MAP> <IMG SRC="bild.gif" USEMAP="#figur1" BORDER="2" WIDTH="185" HEIGHT="51" ALT="Fina figurer :)">
Först har vi våran MAP-tagg, som vi döpt till "figur1". Vi kan välja vad vi vill här.
Sedan har vi våra AREA-taggar. Den första innehåller shape="rect". Det betyder att formen (=shape) ska vara en rektangel (=rect/rectangle). Om man inte skriver någon SHAPE-attribut så blir AREA-taggen automatiskt en rektangel (SHAPE="recr").
Det jag ska skriva nu kräver en del matematiska termer.
Inom parantes har jag skrivit detsamma på ren svenska för de som inte förstår vad jag menar. :)
Har du nu förstått vad jag har skrivit ovan så är det bara att läsa på... :)
Kvadraten: (SHAPE="rect/rectangle")
Cirkeln: (SHAPE="circ/circle")
Den valfria figuren: (SHAPE="poly/polygon")
Nu har jag skrivit </MAP>, vilket avslutar min "karta" (eng. map). Kartan heter, som vi tidigare sa, figur1. Vill vi ha fler sådana här kartor får vi namnge dem till något annat, t.ex. figur2.
Sist har vi själva bilden (vad annars?). :)
I dina AREA-taggar kan du naturligtvis ha TARGET-attributen (vet du inte vad detta är så strunta i det). Om du vill att en bild ska ändras när man för musen över den måste du lära dig JavaScript, alternativt så kan du använda mitt färdiga JavaScript som finns här (kopiera och klistra till din sida). Till nybörjare så rekommenderar jag naturligtvis att bara kopiera mitt JavaScript som redan är färdigt, det är ju lättast så. ;)
Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |