Avatar billede hanloven Mester
15. september 2004 - 00:42 Der er 19 kommentarer og
1 løsning

Hotspot på et baggrundsbillede

Hej.

Jeg er ved at forsøge at få et hotspot i øverste højre hjørne på mit baggrundsbillede... Jeg ligger billedet på via en css fil:

body {
    background-color: #cccccc;
    background-image: url("baggrund.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;

}
h1 {
    color: #000000;
    background-color: #000000;
}

Hvad skal jeg stoppe ind og hvor, for at få det til at fungere ??

På forhånd tak :-)
//Hanloven
Avatar billede roenving Novice
15. september 2004 - 00:49 #1
Nej !-)

Et baggrundsbillede er et baggrundsbillede er et baggrundsbillede er ikke en del af forgrunden, som kan aktiveres ...
Avatar billede roenving Novice
15. september 2004 - 00:51 #2
Du må lægge noget forgrund, som kan aktiveres, f.eks. en div eller lignende, som ligger på samme sted !-)
Avatar billede hanloven Mester
15. september 2004 - 00:56 #3
Okay.. og det vil ikke kunne ligges i css filen, så det fungere på alle de sider som "kalder" filen ??
Avatar billede roenving Novice
15. september 2004 - 00:59 #4
Nej, den slags events kan kun lægges i html-filen (evt. med den der (ie?) syntaks, jeg har set et par gange !-)

<script for et-eller-andet>
Avatar billede hanloven Mester
15. september 2004 - 01:24 #5
Jeg har læst lidt om det og har fundet ud af at man kan placere et gennemsigtigt eller usynligt billede som man kan bruge som link.. Er det den metode du mener ??
Avatar billede roenving Novice
15. september 2004 - 01:28 #6
Principielt ja !-)

Hvis du vil have en kompliceret form, er det kun muligt med en map/area-kombination, men hvis du bare vil have et område kan du f.eks.

<div onclick="location.href='et-eller-andet.html'" style="position:absolute;width:200px;height:150px; cursor:pointer;background:transparent;border:0;z-index:200;"></div>
Avatar billede hanloven Mester
15. september 2004 - 01:42 #7
Det ser ud til at være det jeg skal bruge. Nu har jeg da fået et hotspot i venstre side af skærmen der linker til min forside.. Hvordan flytter jeg den over til højre -er det Position der ikke længere skal stå til "absolute" ??
Avatar billede roenving Novice
15. september 2004 - 01:47 #8
Hvor bred er din baggrund ?-)

For så vil tricket være at du på en af et par måder får kalorius til at følge med ...

Een metode er at lave et element med samme bredde som baggrunden, centrere det og putte 'hotspotten' ind i det ...

En anden er at flytte det hårdt ind med f.eks. left:155px; men den har problemer med skærmstørrelser, når du har centreret baggrunden (og jeg kan ikke umiddelbart gennemskue hvad din fixed background-attachment kommer til at betyde !-)
Avatar billede hanloven Mester
15. september 2004 - 02:01 #9
Min baggrund er 800px bred. Det er fordi jeg har et logo i højre side af skærmen som jeg gerne vil linke til forsiden.. Kan jeg evt. putte en right:600px; ind i stedet for position:absolute; ?? (det må jeg vist lige teste ;-))
Avatar billede roenving Novice
15. september 2004 - 02:09 #10
Så ville jeg:

<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;}
body{background: url("baggrund.jpg") no-repeat top center fixed #ccc;text-align:center;}
#container{position:relative;width:800px;margin:0 auto;}
#hotspot{position:absolute;width:200px;height:150px; cursor:pointer;background:transparent;border:0;z-index:200;}
</style>

<body>
<div id="container">
  <div id="hotspot"></div>
</div>

...
Avatar billede hanloven Mester
15. september 2004 - 02:33 #11
Nu fik jeg hotspotten flyttet ind så den dækker mit logo, men den er godtnok rigelig stor (flyttede den ved at ændre width og height).. Ved ikke om det er den rigtige måde at gøre det på.. (Kan det vel næsten ikke være ??)

Hvordan får jeg den til at linke til min forside - index.htm ?? (håber ikke jeg stiller alt for mange kryptiske spørgsmål..) :-S
Avatar billede roenving Novice
15. september 2004 - 02:36 #12
<div id="container">
  <div id="hotspot" onclick="/index.htm"></div>
</div>
Avatar billede roenving Novice
15. september 2004 - 02:38 #13
-- og hvis du kigger nærmere på de styles, jeg præsenterede i min forrige kommentar, vil du se, at jeg har lagt hotspotten ind i et andet element, med automatisk margin i siderne (margin:0 auto;) hvilket vil centrere yder-elementet, så det indre element vil ligge præcis over den venstre ende af logoet !-)
Avatar billede hanloven Mester
15. september 2004 - 02:52 #14
Jeg må indrømme at jeg har lidt svært ved at gennemskue det (måske pga. tidspunktet) - syns stadig ikke jeg kan få den til at linke på hotspotten, selvom jeg har skrevet det præsis som du har beskrevet det..
Avatar billede roenving Novice
15. september 2004 - 02:57 #15
Undskyld, jeg fik lige lavet en ganske alvorlig tavetosse !-)

<div id="container">
  <div id="hotspot" onclick="location.href='/index.htm'"></div>
</div>
Avatar billede hanloven Mester
15. september 2004 - 03:08 #16
Det var bedre :-) Så fik jeg hul igennem. Der er stadig et par småting der skal rettes til, men det kommer hen ad vejen (tror jeg skal ind og finde noget mere info om det her, så jeg kan forstå hvad jeg lige har skrevet..) Du får endnu engang tak for din store hjælp (og ikke mindst toldmodighed). Hvis du ligger et svar får du lige nogle vel-fortjente point.. :-)
Avatar billede roenving Novice
15. september 2004 - 03:12 #17
Velbekomme '-)
Avatar billede hanloven Mester
15. september 2004 - 03:14 #18
Er lidt nysgerrig.. Arbejder du her om natten, siden du er vågen på det her tidspunkt eller ??
Avatar billede roenving Novice
15. september 2004 - 03:16 #19
Næh, men gruset er først lige begynde at samle sig, så det passer nok med at jeg lukker ned, når E* går i sort om 20 minutter !-)

-- og tak for point ;~}
Avatar billede hanloven Mester
15. september 2004 - 03:19 #20
Selv tak.. Lyder fornuftigt.. vil gøre det samme :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester