Søg
Avatar billede franco Nybegynder
20. marts 2006 - 12:37 Der er 17 kommentarer og
1 løsning

Hyperlink via baggrundsbillede

Jeg ønsker (håber;o) at lave et hyberlink via baggrundsbillede, ala dagens BT - http://www.bt.dk - kan dette gøres på en rimelig enkelt måde - og i bekræftende fald hvordan ;o)?
Avatar billede spaceus Nybegynder
20. marts 2006 - 12:59 #1
<a href="/nyheder/artikel:aid=428704"><img src="http://images.bt2.metropol.dk/328/328620/328620_article_teaser.jpg" width="200" height="171" alt="" border="0" class="black1" align="left"></a>

for at tage bt's eksempel... ideen er at du indkapsler billedet i et anchor tag
Avatar billede franco Nybegynder
20. marts 2006 - 13:12 #2
Desværre er det "sort snak" for mig...... Følgende kode indsætter baggrundsbilledet på min side:

<body topmargin="0" leftmargin="0" style="background-image: url('side_bg.gif')">

Jeg vil gerne lave hyberlink fra 'side_bg.gif'
Avatar billede psykochicken Nybegynder
20. marts 2006 - 14:19 #3
Du kan sætte et link på det element, der indeholder baggrundsbilledet, enten ved at gøre som spaceus skriver, eller ved at sætte en onclick="http://bt.dk".

I dit eksempel kunne du lave:
<body topmargin="0" leftmargin="0" style="background-image: url('side_bg.gif')" onclick="http://bt.dk">
...hvilket vil betyde at uanset hvor på body du klikker vil linket aktiveres....men er det virkelig det du ønsker ?

/psc
Avatar billede franco Nybegynder
20. marts 2006 - 21:19 #4
Til psykochicken; Har lagt dit forslag her http://home1.stofanet.dk/aca

Men det virker ikke - jeg vil gerne gøre "BAGGRUND PÅ SIDEN" til et aktivt hyberlink.
Avatar billede psykochicken Nybegynder
20. marts 2006 - 22:47 #5
Det var en sjuskefejl det skulle hedde:  onclick="location.href='http://bt.dk';".
Men går dit ønske ikke ud på at linket kun skal være aktivt over den del af baggrundsbilledet man faktisk kan se ?

/psc
Avatar billede psykochicken Nybegynder
20. marts 2006 - 23:08 #6
du får lige det, jeg tror du mener:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Din titel</title>
<style type="text/css">
html, body {
  width:100%;
  height:100%;
  margin:0px;
}
</style>
</head>
<body>

<div align="center">
  <table style="background:url('side_bg.gif');" width="100%" height="100%">
    <tr>
      <td style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
      <td width="560px" align="center" style="background:#D5C9BB;">dit indhold</td>
      <td style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
    </tr>
  </table>
</div>

</body>
</html>

/psc
Avatar billede psykochicken Nybegynder
20. marts 2006 - 23:32 #7
hov..der skal også lige højde på div'en:
<div align="center" style="height:100%">
Avatar billede spaceus Nybegynder
21. marts 2006 - 00:29 #8
ja og det kan du selvfølgelig gøre på body også

<body onclick="location.href='http://www.bt.dk' >

.
.
.
</body>

men det virker lidt.... ja håbløst
Avatar billede spaceus Nybegynder
21. marts 2006 - 00:35 #9
<body onclick="location.href='http://www.bt.dk'" background='billede.gif' >

.
.
.
</body>

lige en lille rettelse
Avatar billede franco Nybegynder
21. marts 2006 - 11:35 #10
Ja det er kun det man kan se af baggrunden som skal være aktivt.

Når jeg retter cellpadding="1" til cellpadding="0" i nedenstående virker det ikke?

<body >

<div align="center" >
<table style="background:url('side_bg.gif');" width="100%" height="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
<td width="560" align="center" style="background:#D5C9BB;">Mit indhold</td>
<td style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
</tr>
</table>
</div>

</body>

Jeg har for så vidt jo fået besvaret mit spørgsmål, men jeg har nogle tillægsspørgsmål til dette, skal jeg i den forbindelse oprette et nyt spørgsmål?

Forslag til pointfordeling?

http://home1.stofanet.dk/aca
Avatar billede psykochicken Nybegynder
22. marts 2006 - 00:40 #11
Hvis du vil bruge cellpadding=0, skal du sætte breddeangivelse på alle cellerne enten i pixel eller procent, ellers vil højre og venstre tabelcelle falde sammen, da de ikke har noget indhold ex:

<td width="20%"...>
<td width="60%"...>
<td width="20%"...>

og hvis du vil have din tabel vist korrekt uden for IE, skal du også sætte en højde på 100% på html, body og div'en. Ellers skal du sætte en fast højde på tabellen.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Din titel</title>
<style type="text/css">
html, body{
  height:100%;
  margin:0px;
}
</style>
</head>
<body>

<div align="center" style="height:100%">
  <table style="background:url('side_bg.gif');" height="100%" width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="20%" style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
      <td width="60%" align="center" style="background:#D5C9BB;">dit indhold</td>
      <td width="20%" style="cursor:pointer;" onclick="location.href='http://www.bt.dk';"></td>
    </tr>
  </table>
</div>

</body>
</html>


På http://www.eksperten.dk/opretspm.phtml er anvist passende pointgivning:
15: let, 30: mellem og 60: svær. 100 point er alt for meget for dette spørgsmål, så du kan enten fylde op med tillægsspørgsmål, så det kommer op på 100 point, eller nedsætte pointantallet til dette spørgsmål og bruge de overskydende point til at oprette nye spørgsmål.

Hvordan du fordeler pointene er helt op til dig ;o)
Avatar billede franco Nybegynder
22. marts 2006 - 10:02 #12
OK – jeg prøver at stille nogle tillægsspørgsmål – så må du/I jo sige stop når pointene er brugt ;o)

1) Kan jeg evt. bruge CSS – såfremt jeg ønsker at skifte baggrund eller hyperlink på alle sider?

2) Er der andre løsningsmodeller, eksempelvis hvis jeg har 50 sider som er bygget op som denne:
http://home1.stofanet.dk/aca/index2.htm
og ønsker at gøre den synlige baggrund aktiv, uden at skulle bygge alle siderne om?

3) Kan jeg lave baggrunden aktiv i en tabel som her:
http://home1.stofanet.dk/aca/index3.htm
Avatar billede psykochicken Nybegynder
23. marts 2006 - 02:40 #13
1) du kan styre baggrundsbilledet (og andet) med et stylesheet ex:
Tilføj i head-sektionen på siderne:
<link rel="stylesheet" type="text/css" href="style.css">
OG dit style.css kan så indeholde:
.bglink {
  background:url('side_bg.gif');
}
OG dit element, der så skal indeholde baggrundsbilledet:
<table class="bglink".....

Dit link kan styres med et lille javascript i en selvstændig fil:
Tilføj i head-sektionen på siderne:
<script type="text/javascript" src="mylink.js"></script>
OG din mylink.js kan så indeholde:
function link() {
  window.location.href = 'http://www.bt.dk"
}
OG på element, hvor linket skal virke:
<td onclick="link()".....

Så kan du styre baggrundsbilledet fra style.css og linket fra mylink.js

2) Det er altid bedre at rette sit koncept til (selv om det tager tid) end at lave en lappeløsning, der retter en uhensigtsmæssighed - så på med vanten ;o). Start evt. med at lave en skabelon, hvor det grundliggende med baggrundsbilleder, texttyper, farver og størrelser ligger i et stylesheet - så er det lettere at rette til senere. css-tutorial: http://www.w3schools.com/css/default.asp

3) Sæt onclick="... på det element, der indeholdet baggrundsbilledet...i dit tilfælde på den inderste tabel eller den inderste tabelcelle.

/psc
Avatar billede franco Nybegynder
23. marts 2006 - 13:04 #14
TUSIND TAK! Det er glimrende... - lige til sidst; ved 3) kan man få markøren (musen) til at vise at der er et aktivt link?

Smid lige et "Svar" psc!

PS! Svar ved 2) er en hård nød at sluge.... ;-(
Avatar billede psykochicken Nybegynder
23. marts 2006 - 23:05 #15
Markør (hånd) over element:
<td style="cursor:pointer"......> så viser markøren en hånd ved mouseover.

og vedr. svar 2) ja, men til gengæld har man så lært til næste gang at tænke en ekstra gang over sit grundlæggende design inden man kommer for langt - og det er en rigtig god ting. (har selv været på den flere gange) :o)

/psc
Avatar billede franco Nybegynder
24. marts 2006 - 07:54 #16
HOV! Nu røg alle 100 point til psc, jeg troede man kunne dele dem, plejer man ikke det? Jeg ville gerne give spaceus lidt for hjælpen (80/20 havde jeg forestillet mig) - må/skal jeg oprette et nyt, hvor spaceus kan få nogle points af mig?
Avatar billede spaceus Nybegynder
24. marts 2006 - 08:30 #17
det går nok jeg tager lidt næste gang, så må jeg jo se de 30 sek smidt ud af vinduet ;)
Avatar billede psykochicken Nybegynder
24. marts 2006 - 13:24 #18
Nej - lad os ordne det med det samme :o)
spaceus >> dine point kan hentes her: http://www.eksperten.dk/spm/697801

franco >> tak for point ;o)

/psc
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 09:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
22/0518:51 Pausepil på youtube i chrome Af valby i Browsere
22/0511:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
21/0511:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
White papers
Flere white papers »