Avatar billede bigo Nybegynder
25. juli 2001 - 16:23 Der er 28 kommentarer og
2 løsninger

map / body background clickable

Hejsa.

Bagerst i mit hovede ved jeg at det er dumt at spørge.. Men here goes.

Jeg vil gerne lave et image til en baggrund clickable. Kan det lade sig gøre??

eks....

<BODY class=\"tekststil\" background=\"images/news_13.jpg\" USEMAP = \"#1\" BORDER = \"0\">
<MAP NAME = \"1\">
<AREA SHAPE = \"RECT\" COORDS = \" 71,  40,  111,  80\" HREF = \"right.php\" TARGET = \"info\">
<AREA SHAPE = \"RECT\" COORDS = \" 63,  115,  103,  155\" HREF = \"viskommentar.php\" TARGET = \"_parent\">
<AREA SHAPE = \"DEFAULT\" NOHREF>
<!--  Image map created with Meracl ImageMap Generator, get it for free at http://come.to/meracl  -->
</MAP>

....
Avatar billede olebole Juniormester
25. juli 2001 - 16:44 #1
<ole>
Nej....du kan i stedet lægge nogle andre billeder ind...f.eks. nogle transparente gif\'er.
/mvh
</bole>
Avatar billede callesen Praktikant
25. juli 2001 - 16:48 #2
Det har været oppe før - så hvis der ikke er sket noget nyt så:

nej en baggrund kan ikke \'image-mappes\'; men løsningen er:
Læg nogle transparente CSS-bokse ind og lav dem til link. Evt med \'tomme giffer\' med polygon klik-område, hvis området ikke må være firkantet.
Avatar billede callesen Praktikant
25. juli 2001 - 16:49 #3
Undskyld - jeg så ikke <ole>\'s.
Avatar billede bigo Nybegynder
25. juli 2001 - 17:16 #4
tænkte det sg. nok.. øv.. well. takker anyroads..
Avatar billede olebole Juniormester
25. juli 2001 - 17:34 #5
Du kan til gengæld gøre hele dit dokument clickable - og så spørge til positionen:

<html>
<head>
<script language=\"JavaScript\">
var ns4 = (document.layers)? true : false;
var ie4 = (document.all)? true : false;
var dom = (document.getElementById)? true : false;
var mouseX, mouseY;

function getMouse(e) {
    if(ie4){
        mouseX = event.clientX;
        mouseY = event.clientY;
    }
    else if(ns4 || dom){
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
}
function down(e) {
    getMouse(e);
    alert(mouseX+\" , \"+mouseY);
}
function init() {
    document.onmousedown=down;
}
</script>
</head>

<body onload=\"init();\">

</body>
</html>

Så skal du spørge i down()-funktionen, om mouseX (henholdsvis mouseY) er større og mindre end nogle værdier...svarende til, hvor du vil have dine click-areas.
/mvh
Avatar billede jakobandersen Nybegynder
25. juli 2001 - 18:47 #6
Man kan vel lægge baggrunden ind som et image også bare putte det tilabge vha. z-index.
Avatar billede olebole Juniormester
25. juli 2001 - 18:48 #7
Det kan man også, ja  ;o)
Avatar billede jakobandersen Nybegynder
25. juli 2001 - 18:50 #8
Verden er jo propfyldt med muligheder...
Avatar billede olebole Juniormester
25. juli 2001 - 18:56 #9
...mange flere end umuligheder - og DET er vigtigt at huske på  =o)
Avatar billede bigo Nybegynder
25. juli 2001 - 19:23 #10
olebole>> hvordan skal jeg lave den forespørgelse ??
Avatar billede bigo Nybegynder
25. juli 2001 - 19:30 #11
hvis jeg f.eks. vil lave en firkant til et click-area..
Avatar billede jakoba Nybegynder
25. juli 2001 - 19:35 #12
moonduck >> hvem fanger klikket hvis to klikbare lag ligger over hinanden? bliver klikket passet videre?

mvh JakobA
Avatar billede jakobandersen Nybegynder
25. juli 2001 - 19:36 #13
Det vil for en logiker som mig ikke give mening at have to klikbare ting oven på hinanden, men det øverste vil altid fange klikket vil jeg tro.

<Jeg tror ikke helt jeg har fattet problemstillingen helt>
Avatar billede tyller Nybegynder
25. juli 2001 - 19:41 #14
Du er ikke den eneste
Avatar billede olebole Juniormester
25. juli 2001 - 19:44 #15
Jeg kan godt følge jakoba.....han tænker bare ikke på, at der selvfølgelig ikke ligger noget der, hvor man skal klikke på det nederste lag. Det må være varmen  :o)
Avatar billede olebole Juniormester
25. juli 2001 - 19:47 #16
I stedet for:

function down(e) {
    getMouse(e);
    alert(mouseX+\" , \"+mouseY);
}

..kunne du skrive:

function down(e) {
    getMouse(e);
    if (mouseX>120 && mouseX<220 && mouseY>150 && mouseY<250) {
       alert(mouseX+\" , \"+mouseY); // Eller, hvad der nu skal ske
    }
}

Det giver dig en firkant på 100*100 pixels - begyndende i punktet (120,150).
/mvh
Avatar billede olebole Juniormester
25. juli 2001 - 19:51 #17
Jaja....for hysterikerne: Eksemplet giver ret beset et rektangel på 98*98 pixels med start i (121,151). Eller skulle det have set således ud:

function down(e) {
    getMouse(e);
    if (mouseX>=120 && mouseX<=220 && mouseY>=150 && mouseY<=250) {
       alert(mouseX+\" , \"+mouseY); // Eller, hvad der nu skal ske
    }
}

...Hehe  :)
Avatar billede bigo Nybegynder
25. juli 2001 - 20:05 #18
hmm.. i min body onload=\"init();\" får jeg en object forventet..
Avatar billede olebole Juniormester
25. juli 2001 - 20:09 #19
Så har du ikke skrevet rigtig af!
Avatar billede bigo Nybegynder
25. juli 2001 - 20:09 #20
<script language=\"JavaScript\">
var ns4 = (document.layers)? true : false;
var ie4 = (document.all)? true : false;
var dom = (document.getElementById)? true : false;
var mouseX, mouseY;

function getMouse(e) {
    if(ie4){
        mouseX = event.clientX;
        mouseY = event.clientY;
    }
    else if(ns4 || dom){
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
}
function down(e) {
    getMouse(e);

    if (mouseX>120 && mouseX<220 && mouseY>150 && mouseY<250)
    {
      alert(mouseX+\" , \"+mouseY);
    }
}
function init() {
    document.onmousedown=down;
}
</script>


..
..

<BODY onload=\"init();\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\" BGProperties=\"Fixed\" BottomMargin=\"0\" LeftMargin=\"0\" RightMargin=\"0\">

Mener jeg jeg har..
Avatar billede olebole Juniormester
25. juli 2001 - 20:14 #21
Af hensyn til NS vil det iøvrigt nok gøre sig at returnere falsk til sidst i down():

function down(e) {
    getMouse(e);
    if (mouseX>=120 && mouseX<=220 && mouseY>=150 && mouseY<=250) {
       alert(mouseX+\" , \"+mouseY); // Eller, hvad der nu skal ske
    }
    return false;
}
Avatar billede olebole Juniormester
25. juli 2001 - 20:19 #22
Hmmm....har du husket dine <html></html> tags? Det fajler ikke noget hos mig.....bortset fra, at dette hører til i styles: BGProperties=\"Fixed\"
/mvh
Avatar billede bigo Nybegynder
25. juli 2001 - 20:21 #23
hmm.. hvis jeg fjerner  onload=\"init();\" fra body taget så forsvinder min fejl i ie..
Avatar billede olebole Juniormester
25. juli 2001 - 20:22 #24
Du HAR ingen fejl med det script, du har skrevet her...!
Avatar billede bigo Nybegynder
25. juli 2001 - 20:32 #25
jeg tror dig.. men min browser siger det.. ;-)

Avatar billede olebole Juniormester
25. juli 2001 - 20:39 #26
Avatar billede bigo Nybegynder
25. juli 2001 - 22:13 #27
Ok.. det ser ud til og virke her osse.. så det må være noget ged med koden imellem dit script og body taget.. Kigger lige på sagen..
Avatar billede bigo Nybegynder
25. juli 2001 - 22:15 #28
ARG!! Scriptet lå inde i <head> taget.. nu ruller vi.. ;-)
Avatar billede olebole Juniormester
25. juli 2001 - 22:18 #29
Hehe...det lyder bedre  =o)
Avatar billede roenving Novice
25. juli 2001 - 23:28 #30
Endnu en classico ?~}
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