Søg
Avatar billede nat Nybegynder
05. august 2004 - 10:39 Der er 19 kommentarer og
4 løsninger

Hotspot på baggrundsbillede

Jeg har billede som jeg ønsker skal være baggrundsbillede på en tabel, da det er meningen at jeg skal kunne ligge fx. tekst oven på. Dette kan jeg ikke få til at fungere - så mit spørgsmål er, kan dette egentligt lade sige gøre?

Jeg har følgende html til det:
_________________________________________________________________
                               
<td vAlign="top" width="536" height="596" >
    <map name="FPMap0">
        <area href="http://www.google.dk" shape="circle" coords="480, 399, 9">
        <area href="http://www.google.dk" shape="circle" coords="467, 352, 8">
        <area href="http://www.google.dk" shape="circle" coords="469, 375, 9">
        <area href="http://www.google.dk" shape="circle" coords="460, 389, 9">
    </map>       
    <table cellSpacing="0" cellPadding="0" width="500" height="595" border="0" align="center" background="box.jpg" usemap="#FPMap0">
        <tr align=left valign=top>
            <td height="55" width="500">
                          <h1>Overskrift</h1>
            </td>
        </tr>
        <tr vAlign="top" align="left">
            <td height="540" width="500">teskt testkt
            </td>
        </tr>
    </table>
</td>
_________________________________________________________________

mangler jeg noget, eller kan man ikke gøre det på den måde? Er der evt. en anden måde man kan gøre det på?
Avatar billede roenving Novice
05. august 2004 - 13:13 #1
Nej, du kan ikke sætte et map på en baggrund !-)

Jeg ved ikke, om man kan finde en twist, som gør at du kan få et usemap til at virke hvis du stakker tabellen ovenpå billedet ...

<td vAlign="top" style="position:relative;width:536px;height:596px;" >
    <map name="FPMap0">
        <area href="http://www.google.dk" shape="circle" coords="480, 399, 9">
        <area href="http://www.google.dk" shape="circle" coords="467, 352, 8">
        <area href="http://www.google.dk" shape="circle" coords="469, 375, 9">
        <area href="http://www.google.dk" shape="circle" coords="460, 389, 9">
    </map>
    <img src="box.jpg" usemap="#FPMap0" style="position:absolute;z-index:-1;width:500px;height:595px;">
    <table cellSpacing="0" cellPadding="0" width="500" height="595" border="0" align="center">
        <tr align=left valign=top>
            <td height="55" width="500">
                          <h1>Overskrift</h1>
            </td>
        </tr>
        <tr vAlign="top" align="left">
            <td height="540" width="500">teskt testkt
            </td>
        </tr>
    </table>
</td>

-- og du skal selvfølgelig have at vide, at der overhovedet ikke _findes_ en height-attribut til table-elementer !o]
Avatar billede nat Nybegynder
05. august 2004 - 14:11 #2
øv :o(

Det du har prøvet at sende, det får heller ikke hotspotsne til at virke

Og bare til orientering, så kan det godt være at der ikke findes en height-attribut til table-elementer, men ikke desto mindre så fungerer den :o)
Avatar billede nat Nybegynder
05. august 2004 - 14:13 #3
og ved nærmere gennemsyn, så findes der height på tabeller :o)
Avatar billede roenving Novice
05. august 2004 - 16:30 #4
Nej !-)

Hvis du kigger på definitionen af height her:

http://blooberry.com/indexdot/html/tagpages/t/table.htm

-- vil du kunne se, at selvom en del browsere understøtter dimsen, så findes den overhovedet ikke i nogen html-definition, så hvis du vil have den kode du skriver inklusive halv-avanceret css til at virke ens i alle browser (og derfor sætter et fuldt kvalificeret doctype inkl. dtd-link) vil det ikke virke mere !o]

-- at principielt alle elementer så kan have den som en property på en style-attribut (eller i et stylesheet) er en anden ting, som du måske kan bruge til noget, for på den måde kan du have gyldig kode og ikke kun fungerende kode ...

Der er dog den twist, at det ikke fungere på helt samme måde, f.eks. i forbindelse med flere elementer oven på hinanden ...
Avatar billede nat Nybegynder
05. august 2004 - 17:07 #5
oki.

Men det var nu heller ikke det som var problemet - problemt er stadigvæk hotspot på baggrundsbillede i en tabel.

Nogen der har en idé???
Avatar billede ldanielsen Nybegynder
05. august 2004 - 23:15 #6
Det her virker i explorer, men det er ikke helt færdigt


<html>
<head>
<script>
var theLeft
function clickBackground(){
    if (theURL != ""){
        window.location = theURL;
        }
    }



var arrArea01 = new Array(0, 200, 0, 200)


function handleMouseMove(e) {

    var theLeft = window.event.clientX + document.body.scrollLeft;
    var theTop = window.event.clientY + document.body.scrollTop;
    document.body.cursor = "hand";
    theURL = "";
    if (theLeft > arrArea01[0] && theLeft < arrArea01[1] && theTop > arrArea01[2] && theTop < arrArea01[3]){
        theURL = "http://www.exp.dk";
        }
   
    }

function firstMouseMove(e) {
    handleMouseMove(e);
    window.onmousemove = handleMouseMove;
    document.onmousemove = handleMouseMove;
    }

function init(){
    document.onclick = clickBackground;
    window.onmousemove = firstMouseMove;
    document.onmousemove = firstMouseMove;
    }


//init();

</script>
</head>
<body onLoad="init();">


</body>
</html>
Avatar billede ldanielsen Nybegynder
05. august 2004 - 23:27 #7
Nu tror jeg den er der, stadig kun i Explorer tror jeg

<html>
<head>
<script>

function clickBackground(){
    if (theURL != ""){
        window.location = theURL;
        }
    }



var arrArea01 = new Array(10, 468, 10, 70)
var arrArea02 = new Array(50, 200, 100, 150)


function handleMouseMove(e) {

    var theLeft = window.event.clientX + document.body.scrollLeft;
    var theTop = window.event.clientY + document.body.scrollTop;
   
    theURL = "";
   

    if (theLeft > arrArea01[0] && theLeft < arrArea01[1] && theTop > arrArea01[2] && theTop < arrArea01[3]) theURL = "http://www.exp.dk";
    if (theLeft > arrArea02[0] && theLeft < arrArea02[1] && theTop > arrArea02[2] && theTop < arrArea02[3]) theURL = "http://www.google.dk";
   

    document.body.style.cursor = (theURL == "") ? "auto" : "hand";
    }

function firstMouseMove(e) {
    handleMouseMove(e);
    window.onmousemove = handleMouseMove;
    document.onmousemove = handleMouseMove;
    }

function init(){
    document.onclick = clickBackground;
    window.onmousemove = firstMouseMove;
    document.onmousemove = firstMouseMove;
    }


</script>
</head>
<body onLoad="init();">
<h1>
Tekst Tekst
</h1>

</body>
</html>
Avatar billede nat Nybegynder
06. august 2004 - 14:20 #8
ldanielsen: det ser ud til at det er det der skal til for at få det til at fungerer :-) kanon!

Men jeg kan ikke helt greje hvor du sætter koordinaterne henne?

Jeg har følgende hotspots:
<area href="http://www.google.dk" shape="CIRCLE" coords="480,399,9">
<area href="http://www.google.dk" shape="CIRCLE" coords="467,352,8">
<area href="http://www.google.dk" shape="CIRCLE" coords="469,375,9">
<area href="http://www.google.dk" shape="CIRCLE" coords="460,389,9">
<area href="http://www.google.dk" shape="CIRCLE" coords="418,399,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="403,463,9">
<area href="http://www.google.dk" shape="CIRCLE" coords="347,428,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="436,358,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="446,329,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="243,447,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="183,406,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="224,283,9">
<area href="http://www.google.dk" shape="CIRCLE" coords="168,333,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="135,363,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="134,406,10">
<area href="http://www.google.dk" shape="CIRCLE" coords="44,398,11">

Hvor sætter jeg de koordinater?
Avatar billede ldanielsen Nybegynder
06. august 2004 - 14:24 #9
Mit script understøtter ikke cirkler :o) Det var da ellers en udfordring jeg vil kigge på.



men Rects defineres i:
var arrArea01 = new Array(10, 468, 10, 70)

Som du ser har jeg lavet to, den anden hedder blot arrArea02

Derudover skal der være en tilhørende linie for hver her:
if (theLeft > arrArea01[0] && theLeft < arrArea01[1] && theTop > arrArea01[2] && theTop < arrArea01[3]) theURL = "http://www.exp.dk";


Jeg vil se på det og gøre det mere brugervenligt
Avatar billede nat Nybegynder
06. august 2004 - 14:26 #10
arhh, okay den er lavet til firkantede hotspots
Avatar billede nat Nybegynder
06. august 2004 - 14:32 #11
men man kan ikke rigtigt bruge de koordinater som f.eks. FrontPage giver en, og det er ikke så godt, da hotspotsne bliver alt for store - er det noget man kan sætte?
Avatar billede ldanielsen Nybegynder
06. august 2004 - 14:41 #12
Så er den der:


<html>
<head>
<script>
var arrRects = new Array()
var arrCircles = new Array()

//---------------------------
addRect(10, 10, 468, 70, "http://www.exp.dk")

addCircle(250, 250, 50, "http://www.yahoo.com")
addCircle(550, 250, 50, "http://www.yahoo.com")

//-----------------------------

function clickBackground(){
    if (theURL != ""){
        window.location = theURL;
        }
    }
   
function addRect(left, top, right, bottom, stUrl){
    var temp = new Array(left, right, top, bottom, stUrl)
    arrRects[arrRects.length] = temp
    }
   
function addCircle(left, top, diameter, stUrl){
    var temp = new Array(left, top, diameter, stUrl)
    arrCircles[arrCircles.length] = temp
    }
   
function handleMouseMove(e) {

    var theLeft = window.event.clientX + document.body.scrollLeft;
    var theTop = window.event.clientY + document.body.scrollTop;
   
    theURL = "";

    for (i=0;i<arrRects.length;i++){
        var temp = arrRects[i];
        if (theLeft > temp[0] && theLeft < temp[1] && theTop > temp[2] && theTop < temp[3]) theURL = temp[4];
        }
       
    for (i=0;i<arrCircles.length;i++){
        var temp = arrCircles[i];
        if (Math.sqrt(Math.pow(theLeft-temp[0], 2) + Math.pow(theTop-temp[1], 2)) < temp[2]) theURL = temp[3];
        }

    document.body.style.cursor = (theURL == "") ? "auto" : "hand";
    window.status = (theURL == "") ? "" : "theURL";
    if (theURL != "") window.status = theURL;
    }

function firstMouseMove(e) {
    handleMouseMove(e);
    window.onmousemove = handleMouseMove;
    document.onmousemove = handleMouseMove;
    }

function init(){
    document.onclick = clickBackground;
    window.onmousemove = firstMouseMove;
    document.onmousemove = firstMouseMove;
    }


</script>
</head>
<body onLoad="init();" background="back.gif">
<h1>
Tekst Tekst
</h1>

</body>
</html>
Avatar billede ldanielsen Nybegynder
06. august 2004 - 14:44 #13
//---------------------------
addRect(10, 10, 468, 70, "http://www.exp.dk")

addCircle(250, 250, 50, "http://www.yahoo.com")
addCircle(550, 250, 50, "http://www.yahoo.com")

//-----------------------------

- viser hvordan du tilføjer et rect og to circles

enheden er pixels, det kan man ikke lige lave om, jeg ved ikke hvad frontpage giver dig

Bemærk rækkefølgen af parametre:

Rect: left, top, right, bottom,
Circle: left, top, radius (Jeg har kaldt variablen diameter, det er misvisende, der er tale om radius, left og top er center af cirklen)

Alt målt fra øverste venstre hjørne af vinduet
Avatar billede nat Nybegynder
09. august 2004 - 11:23 #14
ldanielsen: Hmmm kan ikke få det til fungerer (skal fungerer lidt ala i det eksempel jeg gav i starten), dvs. billedet ligger som baggrund i en tabel og ikke som baggrund til body.
Avatar billede nat Nybegynder
09. august 2004 - 14:09 #15
Roenvig: Smid et svar
ldanielsen: Jeg kan desværre ikke bruge det du har lavet, men du skal have nogle af pointne alligevel, da du har gjort en indsats for at løse mit problem

Jeg fik løst mit problem ved at ligge alle mine ting i samme celle, og derefter benytte mig af mit stylesheet og Z-index (inspireret af Roenving). Så jeg bruger alm. map og area
Avatar billede roenving Novice
09. august 2004 - 14:30 #16
Oki '-)

-- men ærgerligt, at du ikke kunne få den forkromede løsning til at virke, måske ville noget manipulation af koordinater i forhold til din tabel kunne løse det ?-)
Avatar billede ldanielsen Nybegynder
09. august 2004 - 15:02 #17
Man kunne nu let få det til at virke i en tabel også, men ok ...
Avatar billede nat Nybegynder
09. august 2004 - 15:28 #18
roenving: ja, ærgeligt.
ldanielsen: nu siger du let, men det kommer vel an på hvem man er ;-) jeg kunne ikke få det til at fungerer, selvom det klart ville være federe end z-index.
Avatar billede roenving Novice
09. august 2004 - 15:37 #19
-- og tak for point ;~}
Avatar billede ldanielsen Nybegynder
10. august 2004 - 14:38 #20
Her er den med et table. Følgende linie i init():

theTable = document.all.theTable;

fortæller hvilket element det er der skal bruges (kan fx. sættes til document.body)

<html>
<head>
<script>
var arrRects = new Array()
var arrCircles = new Array()
var theTable
//---------------------------
addRect(10, 10, 468, 70, "http://www.exp.dk")

addCircle(250, 250, 50, "http://www.yahoo.com")
addCircle(550, 250, 50, "http://www.yahoo.com")

//-----------------------------

function clickBackground(){
    if (theURL != ""){
        window.location = theURL;
        }
    }
   
function addRect(left, top, right, bottom, stUrl){
    var temp = new Array(left, right, top, bottom, stUrl)
    arrRects[arrRects.length] = temp
    }
   
function addCircle(left, top, radius, stUrl){
    var temp = new Array(left, top, radius, stUrl)
    arrCircles[arrCircles.length] = temp
    }
   
function handleMouseMove(e) {
    var theLeft = window.event.clientX + document.body.scrollLeft - theTable.offsetLeft - theTable.clientLeft;
    var theTop = window.event.clientY + document.body.scrollTop - theTable.offsetTop - theTable.clientTop;
   
    theURL = "";

    for (i=0;i<arrRects.length;i++){
        var temp = arrRects[i];
        if (theLeft > temp[0] && theLeft < temp[1] && theTop > temp[2] && theTop < temp[3]) theURL = temp[4];
        }
       
    for (i=0;i<arrCircles.length;i++){
        var temp = arrCircles[i];
        if (Math.sqrt(Math.pow(theLeft-temp[0], 2) + Math.pow(theTop-temp[1], 2)) < temp[2]) theURL = temp[3];
        }

    document.body.style.cursor = (theURL == "") ? "auto" : "hand";
    window.status = (theURL == "") ? "" : "theURL";
    if (theURL != "") window.status = theURL;
    }

function firstMouseMove(e) {
    handleMouseMove(e);
    window.onmousemove = handleMouseMove;
    document.onmousemove = handleMouseMove;
    }

function init(){
    theTable = document.all.theTable;
    document.onclick = clickBackground;
    window.onmousemove = firstMouseMove;
    document.onmousemove = firstMouseMove;
    }


</script>
</head>
<body onLoad="init();" background="back.gif">

<center>
<table width=600 height=600 border=20 cellpadding=10 cellspacing=30 id="theTable" style="position: relative;" background="back.gif">
<tr><td>Hej</td></tr></table>
</center>
</body>
</html>
Avatar billede roenving Novice
10. august 2004 - 14:49 #21
Hvorfor bruger du document.all, når der findes en w3c compliant ækvivalent i document.getElementById ?-)
Avatar billede ldanielsen Nybegynder
10. august 2004 - 15:21 #22
Jeg har ikke meget forstand på cross-browser dhtml, men det er da rart at lære noget nyt.

Jeg skulle måske overveje at holde mig fra dhtml og javascript indtil jeg ved alt om det, jeg vil da ikke udgive mig for at være ekspert når jeg ikke er det. Er det OK at jeg svarer på spm. om ASP og SQL-Server indtil da??
Avatar billede roenving Novice
10. august 2004 - 15:29 #23
>>du er zq velkommen til også at komme med input med javascript, men jeg synes det er tåbeligt, at du ikke er klar over, at document.all er noget M$ har opfundet, som bestemt ikke fik nogle stemmer, da standarden skulle vedtages ...

Selv M$s repræsentanter kunne med et ½ øje se, at det bestemt ikke passer ind i DOM-modellen, så de stemte også for den udgave, som hedder .getElementById !-)
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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 21:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
I går 20:06 email adresse Af Malm i Forslag til ændringer
I går 19:54 problem med google crome Af Malm i Andet software
I går 09:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »