Avatar billede molokyle Nybegynder
30. maj 2003 - 21:43 Der er 12 kommentarer og
1 løsning

Dynamisk MAP til IMG ?

Jeg har et billede der 'resizer' med browser vinduet og når der skiftes opløsning. Jeg har lavet et MAP til billedet med maximeret browservindue. Her kommer SPØRGSMÅLET:

Hvordan får man MAP koordinaterne til at følge med 'resize'-ningen ?

PROBLEMET er:

Imagemap'et får focus de forkerte steder eller rettere: Fokus på de koordinater der oprindeligt er defineret.
D.v.s. når opløsningen bliver mindre (eller skærmområdet), så 'ryger' min mapping. Hvad gør jeg ?
Avatar billede roenving Novice
30. maj 2003 - 22:55 #1
Den eneste reference jeg kunne finde var, at man kan ændre usemap, altså at man kan definere forskellige usemaps for forskellige størrelser, men dynamisk udover det kunne jeg ikke finde ;-|
Avatar billede molokyle Nybegynder
31. maj 2003 - 05:53 #2
...jøb,
det ville give mig 1024x768=786432 koordinatsæt ganget med antallet af map's pr. billede. De (koordinatsættene) skulle så udtrækkes af en database ved 'resize'...Øh, lidt uoverskueligt !!!
Avatar billede roenving Novice
31. maj 2003 - 11:01 #3
*gg*
Avatar billede olebole Juniormester
08. juni 2003 - 16:02 #4
<ole>

Du udskriver dit image-map i et div med en id. Så kan du opdatere det med 'innerHTML' på onResize.
Hvordan selve udregningen af dit nye map så skal se ud, kan kun du vide  :)

/mvh
</bole>
Avatar billede molokyle Nybegynder
08. juni 2003 - 22:35 #5
Yes..
Jeg ska' bare lige tjekke om onResize ikke kolliderer med mit (nej; jeg har IKKE skrevet det selv!) fixed.js script. Jeg har nemlig prøvet noget i den retning men, det gav bare: 'EVIG LØKKE' resize,resize,resize...osv. , du ved?; "TIMEGLAS" - og jeg ka' ikke rigtigt gennemskue hvorfor. Jeg må lige selv rundt i krogene før jeg spør' om mere.

Tak for Kom...
Avatar billede olebole Juniormester
09. juni 2003 - 01:20 #6
Prøv at lægge en URL, så skal jeg se på det  :)
Avatar billede molokyle Nybegynder
09. juni 2003 - 11:40 #7
Scriptet hentede jeg her: http://doxdesk.com/software/js/fixed.html

Det jeg forsøgtet for et par dage siden var at opdaterer koordinaterne i MAP med et script der gav mig viduets indre koordinater, beregnde MAP koordinaterne ud fra dette og indsatte dem via javascript variable on Resize. Det gik ikke så godt. Mit script blev skrottet, så det kan jeg desværre ikke gi' dig :-(

Nu tænker jeg lige over det, men du kan jo studerer fixed.js. Skide smart script :-)

Hygge... molokyle.
Avatar billede olebole Juniormester
09. juni 2003 - 17:35 #8
Afgjort et skod-script  :)
Den slags script-biblioteker bør man så vidt muligt undgå - og så skrive scriptet dedikeret til det formål, man aktuelt skal bruge det til. Ellers ender man med en bunke overflødig og redundant kode, der blot besværliggør resten af kodeskrivningen.

Umiddelbart ser den slags libs ganske smart ud, men i praksis er det noget bøvl.
... nok også én af grundende til, du formodentlig ikke finder ét professionelt bygget site, der gør brug af 'fixed.js'  ;o)
/mvh
Avatar billede molokyle Nybegynder
09. juni 2003 - 18:34 #9
Sikkert ret... bruger det også kun i 'sandkassen' :)

innerHTML er det ikke DHTML ? Der er jeg ret grøn. Jeg har kikket på :
http://www.developer-x.com/content/innerhtml/

Kender du er bedre sted jeg kan 'boge' den i brugen af innerHTML?
Derefter vil jeg kikke på din DIV ID= løsning :-)

Hai; molokyle
Avatar billede olebole Juniormester
09. juni 2003 - 19:32 #10
I princippet burde du kunne gøre sådan:

<script type="text/JavaScript">
var d=document;
function writeMap(coords) {
    d.getElementById("bla").coords = coords;
}
</script>

<button onclick="writeMap('20,20,400,400')">Skift Map</button><br>

<img src="pic.jpg" usemap="#myMap" border="0">

<map name="myMap">
    <area id="bla" shape="rect" coords="10,10,100,100" href="#">
</map>

Det vil Opera dog ikke være med til, så du kan bruge innerHTML (som dog først kom med i Opera i version 7):

<script type="text/JavaScript">
var d=document;
function writeMap(coords) {
    d.getElementById("bla").innerHTML = '<area shape="rect" coords="' + coords + '" href="#">';
}
</script>

<button onclick="writeMap('20,20,400,400')">Skift Map</button><br>

<img src="pic.jpg" usemap="#myMap" border="0">

<map id="bla" name="myMap">
    <area shape="rect" coords="10,10,100,100" href="#">
</map>

Det skulle vise princippet i løsningen. Så skal du selvfølgelig beregne det nye map's koordinater og kalde scriptet med dem som argument. Det skal gøres som det sidste på onresize - i stedet for ved en knap  :)
/mvh
Avatar billede olebole Juniormester
09. juni 2003 - 19:44 #11
Hvis ikke du kan finde ud af at beregne/indsætte scriptet i et resize-script, kan du vel også gøre sådan:

<script type="text/JavaScript">
var d=document;
function writeMap(im) {
    var imW = im.width; // Billedets bredde
    var imH = im.height; // Billedets højde
    /*
        Her beregner du de nye koordinater
        udfra billedets dimensioner:
        coords =
    */
    d.getElementById("bla").innerHTML = '<area shape="rect" coords="' + coords + '" href="#">';
}
</script>

<img src="pic.jpg" usemap="#myMap" onmouseover="writeMap(this)" border="0">

<map id="bla" name="myMap">
    <area shape="rect" coords="10,10,100,100" href="#">
</map>

/mvh
Avatar billede molokyle Nybegynder
10. juni 2003 - 07:52 #12
Hø hø.. det var faktisk din 'sidste løsning' jeg brugte, dog med et andet script for writeMap(im), da jeg ikke kendte innerHTML :-) Det var vist noget med:

function recal() /* skal kaldes fra body med window.onresize ! */
{
if (Width != BwindowWidth() || Height != BwindowHeight())
window.history.go(0);
}

Nu har jeg også i <head> indsat:

/*initialization for NetScape */
if(!window.Width && window.innerWidth)
  {
  window.onresize = recal;
  Width = BwindowWidth();
  Height = BwindowHeight();
  }

Med Width og Height beregnes koordinaterne og vupti det VIRKER ! Dog ikke med 'skod-scriptet', som du kalder det; window.history.go(0) er vist skurken?

Såe... der vist ikke andet at gøre end at sende mig et svar olebole :-)

Tak MoloKyle.
Avatar billede olebole Juniormester
10. juni 2003 - 13:14 #13
Jamen ... det lyder da herligt  :)
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