Her får du hjelp til å lage hjemmeside med video. Alle verktøy og programmer vi bruker til å lage webside er gratis.
Hvordan linke bilde?
tir, 01/19/2010 - 20:49
Lurer på hvordan man kan linke et bilde. Jeg har laget en layout hvor jeg alt har skrevet på "sidene" som f.eks. "om meg" osv .. Hvordan kan jeg linke ordene i layouten? Må jeg "klippe ut" ordene, lagre dem, og så legge dem oppå layouten og så linke dem?
Dårlig til å foklare, så håper det er forståelig :S
tir, 01/19/2010 - 23:32
#1
Linking av bilder
Skal ikke si meg uenig i at du er dårlig til å forklare, nei, hehe :)
Linke med bilde
Men med å linke et bilde, mener du at man skal kunne klikke på bildet for å bli tatt til en annen webside? F.eks.: Du har et bilde som illustrerer websiden om meg
, og ønsker å linke til denne websiden ved hjelp av bildet.
I såfall gjør man dette ved å bruke følgende:
<a href="/om-meg.html" title="om meg">
<img src="/bilde.jpg" alt="om meg" />
</a>Bruker man denne koden vil bildet bilde.jpg være linket til dokumentet om-meg.html.
Linke til bilde (med tekst)
Hvis du vil linke til et bilde med tekst, erstatter du kilden i attributten href med filbanen til bildet, slik;
<a href="/bilde.jpg" title="bilde av meg">bilde av meg</a>Her vil teksten bilde av meg
peke til bildet bilde.jpg.
Linke med tekst
Hvis du har ord du ønsker å linke, bruker du naturligvis HTML-taggen for link rundt ordene du vil skal være selve linken, f.eks.;
<a href="/om-meg.html" title="om meg">om meg</a>Hvis dette ikke er hva du er ute etter, prøv gjerne å vær litt mer utfyllende, så skal jeg prøve å hjelpe deg. :)
tor, 01/21/2010 - 00:04
#3
Mouse over, filbaner og border rundt linkede bilder
Jeg har, i tillegg til svarene på spørsmålene dine, også formulert og henvist til en digresjon. Jeg begynner med digresjonen, da jeg synes den er viktigst.
Roll over (mouse hover) effekt på bilder
Det finnes en langt bedre og bredere støttet måte enn JavaScript for å få til mouse hover effekt. Mouse over effeken skjer ved hjelp av CSS og HTML, og du kan lese hvordan du gjør dette, under overskriften "Hover effekt på bilder" i den linkede tråden.
Fjerne border rundt linket bilde
Borderen (firkanten) rundt det linkede bildet kommer fordi det skal signaliseres at bildet er en link. For å fjerne denne, går du inn i CSS, og skriver:
a img {
border: none;
}Denne vesle kodesnutten vil fjerne rammen rundt alle bilder som er ankertekst
i en link.
Siden kan ikke vises
Grunnen til at du får siden kan ikke vises
, er fordi du bruker absolutte filbaner.
Her har jeg skrevet en lengre guide om relative og absolutte filbaner, og hvordan du bruker dem.
tor, 01/21/2010 - 16:25
#4
Feilmelding i Internet Explorer & mouse hover
Jeg fikk det til, men det kommer opp:
Internet Explorer har begrenset denne websiden fra å kjøre skript eller ActiveX-kontroller som kan få tilgang til datamaskinen, for bedre sikkerheten. Klikk her for alternativer.
Hvorfor kommer dette opp, og kommer det til å komme opp hos alle som skal innpå siden min med Explorer? Men ellers fynker alt når jeg trykker på "tillat blokkert innhold".
Men har du evt. en bedre rollover html (hvor jeg setter inn to bilder)? Forstod ikke helt forklaringen på den du linket ...
tor, 01/21/2010 - 18:01
#5
JavaScript rollover
Ja, folk som kommer inn på websiden din vil få opp den advarselen der. Dette henger sammen med hvordan de har stilt inn Internet Explorer, og at du bruker slike events for å laste inn og ut de to bildene (mouse hover og normal).
For å unngå advarselen, kan du følge guiden jeg linket til i den forrige tråden, evt. gå frem på en litt annen måte for å få samme funksjonalitet. Her er en meget omfattende og god engelsk guide som viser hvordan man bytter to bilder ved mouse over ved hjelp av JavaScript. Merk at guiden går over flere sider. Du lærer b.la. å preloade bilder, slik at funksjonaliteten ser "smoothere" ut.
Det enkleste er dog å følge guiden i det forrige scriptet, men det krever CSS-kunnskaper, har du det?
tor, 01/21/2010 - 22:43
#6
Ja, jeg kan forsåvidt css men
Ja, jeg kan forsåvidt css men er ganske ny, lærer forsatt så jeg må innom sider for å finne koder og hjelp ... Får se om jeg får det til ;) Må bare sette meg litt inn i det så får jeg det sikkert til å fynke ;) Takk for all hjelpen :)
ons, 01/27/2010 - 22:26
#7
Legge til to bilder med koden
Jeg klarer ikke å få det til med den engelske :( Føler meg håpløs.
Men det jeg lurer på er; Den forklaringen du linket, forstår dette her med css og html, men hvordan legger jeg inn to bilder med koden:
/* Default state for linken */
a.login {
background: transparent url('./images/padlock_hover.png') no-repeat;
background-position: left -30px;
color: #424242;
padding-left: 20px;
}/* Hoover state for linken */
a.login:hover {
background-position: left 0px;
}Det er jo bare et sted jeg legger inn bilde eller?
tor, 01/28/2010 - 02:04
#8
Hover effekt på bilder med CSS
Det er ikke rart du ser etter bilde nummer 2 her, for det skal ikke være noe bilde nummer to. Måten man gjør dette på, er å ha bildet i default state og hover state i samme fil, og så flytte bildet via background position når man tar musa over.
Legg merke til bildet i guiden jeg skrev, der har man ett bilde med hengelåsen både i sort hvitt og farger i samme fil, når man tar musa over bildet så flytter CSS bildet ved hjelp av background-position.
En enklere måte er selvsagt å bare bruke to bilder, men da får man "flimmer" ved hover første gang (fordi bildet lastes inn).
/* Default state */
div#bilde {
background: url('./bilde.jpg') no-repeat;
width: 160px /* bredde på bildet */
height: 100px /* høyde på bildet */
}
/* Hover state */
div#bilde:hover {
background: url('./hover-bilde.jpg') no-repeat;
/* Siden bildene er like store
trenger man ikke å sette ny
bredde og høyde.
*/
}
Tusen takk, var noe sånn jeg mente ^^ Har i hvert fall fått svaret på det jeg lurte på :)
HjemmesideEdit: Sammenslått to tråder.Spørsmål rundt linking av bilder og hover effekt
Ehmm ... Nå har det seg sånn at jeg prøvde å linke et "rollover bilde" på samme måte som et vanlig bilde skal linkes, er det rett? Rollover bilde får en lilla firkant rundt seg, og når jeg klikker på det står det at siden ikke kan vises, må siden publiseres for at det skal fynke?
Sånn ser det ut;
<a href="/Eksempel.html" title="Eksempel"><img src="eksempel1.jpg" Onmouseover="this.src='eksempel2.jpg'" Onmouseout="this.src='eksempel1.jpg'" />
</a>
Er den rett? Og hvis, hva skal jeg gjøre for å få firkanten bort? Er den feil? Og hvis, hva er galt?
Tusen takk for svar! :)