[CSS / JS] imagemap resize - Softwareontwikkeling

dinsdag 11 mei 2004 13:49

Acties:

Topicstarter

Ik ben bezig met een site, waarop 2 hoofdonderdelen staan: links een plaatje van 800*500, en rechts een navigatiebalk. Ik heb, na lang vechten met IE, gezorgd dat hij er zowel in IE als in Mozilla goed uitziet op 1024*768, maar ik loop nu tegen een probleem aan waar ik niet uit kom.
In Mozilla wordt dmv max-width het plaatje kleiner gemaakt wanneer de resolutie te laag is. Dat werkt niet in internet-explorer, dus daar moet ik een javascriptje voor schrijven. Het probleem is echter dat het grote plaatje een imagemap is, wat niet meer werkt zodra die kleiner is geworden: de map wordt niet kleiner gemaakt.
Hoe los ik dat op? Weet iemand of daar een scriptje voor bestaat?

dinsdag 11 mei 2004 13:50

Acties:

disjfa

Ik denk dat je gewoon met vaste breedtes verder gaat komen dan met javascript. Maar doe is een gooi met wat sourcecode.

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 11 mei 2004 13:50

Acties:

André

Analytics dude

Je zult die imagemap opnieuw moeten schrijven maar dat is een hoop gedonder. Weet je zeker dat die imagemap nodig is?

dinsdag 11 mei 2004 13:50

Acties:

Verwijderd

Kan je de imagemap niet resizen? De imagemap coordinaten verkleinen toch gewoon linear mee?

dinsdag 11 mei 2004 13:54

Acties:

MBV

Topicstarter

Nope, ze resizen niet lineair mee. Ik zal zo even een statische pagina maken, waar jullie niet te veel aan kunnen slopen

edit:
ik bedoel, met een CSS regel wordt de image kleiner, maar de imagemap niet. als iemand weet hoe ik dat gedrag moet veranderen, houd ik me aanbevolen

Ja, die imagemap is nodig: gebruikers moeten op een kaart interessante punten kunnen aanklikken voor meer info. Dat is de hele reden dat ik dat ding maak.
Vaste breedtes lijkt me niet handig: dan ziet het er of op 1024*768 lelijk uit, of op 800*600.

[ Voor 18% gewijzigd door MBV op 11-05-2004 13:54 ]

dinsdag 11 mei 2004 14:46

Acties:

MBV

Topicstarter

http://217.148.172.38/Temp/imagemap/lokatiekaart_extern.html

Dit is waar het om gaat. In mozilla wordt hij mooi kleiner, in IE niet. Maar ook in mozilla kloppen de coordinaten niet. Heeft iemand een slimme suggestie om dit te maken?

edit:
excuses voor de vorige post, nu ik nog een keer kijk lijkt het erg veel op in de grond hakken of zoiets. Zo had ik het niet bedoeld, ik wordt hier alleen een beetje gefrustreerd van

[ Voor 30% gewijzigd door MBV op 11-05-2004 14:48 ]

dinsdag 11 mei 2004 14:49

Acties:

André

Analytics dude

Waarom zet je geen klikbare layers over dat plaatje heen die je met % positioneerd.

dinsdag 11 mei 2004 14:59

Acties:

MBV

Topicstarter

Dat zou een idee kunnen zijn. Wordt wel lastig, maar moet te doen zijn. Je bedoelt dus iets als doorzichtige div's met onclick ofzo?

dinsdag 11 mei 2004 15:02

Acties:

Verwijderd

Je kan toch de coordinaten linear meeverkleinen?

van 400px, 400px naar 200px, 200px => x 0.5

Stel je hebt een map coordinaat (100, 200), na verkleining zit dat coordinaat op (50, 100)

dinsdag 11 mei 2004 15:05

Acties:

MBV

Topicstarter

ja, dat klopt. Alleen werkt dat alleen relatief t.o.v. de originele lokaties. Ik zit er dus over te denken hoe ik dat overzet vanaf PHP naar JavaScript (array bovenaan ofzo

), en vervolgens hoe ik de coordinaten van de area's aanpas.

dinsdag 11 mei 2004 15:46

Acties:

Verwijderd

Alsje

Lijkt te werken, dit ongeveer de bedoeling?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript">
function init () {
  var iScale = 2, d = document;
  var sCoords = d.getElementById('area').coords;
  var sNewCoords = getNewCoords(sCoords, iScale);
  d.getElementById('area').coords = sNewCoords;
}

function getNewCoords(s, f) {
  var a = s.split(','), sRet = '', i = 0;
  while (i < a.length) {
    sRet += (parseInt(a[i]) * parseInt(f)) + ",";
    i++;
  }
  return (sRet.substr(0, sRet.length -1)); // Skip de laatste , ranzig maar effectief
}
    </script>
  </head>
  <body onload="init();">
    <map name="map1">
      <area id="area" href="contacts.html" alt="Contacts" title="Contacts" shape="RECT" coords="0,0,100,100">
    </map>
    [img]"jorgen.jpg"[/img]
  </body>
</html>

dinsdag 11 mei 2004 15:52

Acties:

1st_Ro

Even als spuit 11 gesproken : Buiten het feit dat het best wel lastig te maken is (maar niet onmogelijk

) lijkt me dit typisch iets wat je met Flash heel makkelijk kan oplossen, aangezien dat kan schalen zonder verlies van functionaliteit.

Of je het wil/kan/mag is de vraag natuurlijk, maar tiz maar een idee

dinsdag 11 mei 2004 16:31

Acties:

MBV

Topicstarter

@Jorgen:

dat had ik niet mogen/durven/... dromen! Dankjewel, scheelt mij heel veel tijd! Ik kan het nu niet meer testen, morgen zal ik het resultaat geven.

@1st_Ro: ik heb opdracht gekregen om het niet te doen, en ben er uit principe een beetje tegen

dinsdag 11 mei 2004 21:52

Acties:

Verwijderd

Gewoon map object opvragen... Alle area childs doorlopen, en nieuwe coordinaten uitrekenen.

woensdag 12 mei 2004 13:16

Acties:

MBV

Topicstarter

Er moest nog veel aan gebeuren, maar je hebt me iig op de goeie weg gezet.
http://217.148.172.38/Temp/imagemap/lokatiekaart_extern.html doet het nu bijna helemaal zoals ik zou willen. Soms pakt mozilla de border van de DIV niet mee, en IE doet lekker vervelend met 4 pixels padding onder het plaatje, maar dat mag de pret niet drukken.

In DHTMLAPI zitten wat standaarddingen om verschillen tussen browsers op te vangen mbt objecten opvragen etc., maar die zet ik er maar niet bij ivm copyright en andere enge dingen

code:

//requires DHTMLAPI

//resize locationmap (with calculation)
//uses getInsideWindowWidth and getRawObject from dhtmlapi

//mapWidth and mapHeight are the original sizes
//areasX, areasY are arrays with all original area coordinates
//areaSize is the original size of the last area
//isResized is the state, so that I can skip the calculation if it isn't 
// neccesary
var mapWidth, mapHeight, isResized;
var areasX = Array(), areasY = Array(), areaSize;

function resizeLocationMap()
{
  resizeLocationImage();
  resizeLocationImageMap();
}

function resizeLocationImage()
{
  //knipperdeknip
  //wil je hem zien, kijk dan maar bij het voorbeeld. Hier is het te lang voor
  // het overzicht
}

function resizeLocationImageMap() 
{
  var childs = getRawObject("locationMapMap").childNodes;
  var coords, coordsArray, newCoords;
  var image, width, height;
  image   = getRawObject("locationMapImg");
  width   = image.width;
  height  = image.height;  
  if (width == mapWidth && height == mapHeight && !isResized)
  {
    return;
  }
  else {
    scale = width/mapWidth;
    var childs = getRawObject("locationMapMap");
    childs = childs.areas;
    for (i = 0; i < childs.length; i++)
    {
      oldCoords = childs[i].coords;
      childs[i].coords = areasX[i]*scale + ',' + areasY[i]*scale + ',' + areaSize;
    }
  }  
}

function initResizeLocationMap()
{
  var image;
  initDHTMLAPI();
  //image
  image     = getRawObject("locationMapImg");
  if (image.naturalWidth)
  {
    mapWidth  = image.naturalWidth;
    mapHeight = image.naturalHeight;
  }
  else {
    mapWidth  = image.width;
    mapHeight = image.height;
  }
  resizeLocationImage();
  
  //locationmap
  var childs = getRawObject("locationMapMap");
  childs = childs.areas;
  var coords, coordsArray, newCoords;
  for (i = 0; i < childs.length; i++)
  {
    coords = childs[i].coords;
    coordsArray = coords.split(',');
    areasX[i] = coordsArray[0];
    areasY[i] = coordsArray[1];
    areaSize  = coordsArray[2];
  }
  resizeLocationImageMap();
}

window.onload = initResizeLocationMap;

edit:

Toch jammer dat niemand meer iets zegt. was benieuwd wat jullie er van vonden

[ Voor 19% gewijzigd door MBV op 12-05-2004 14:47 ]

woensdag 12 mei 2004 16:03

Acties:

Verwijderd

1.) Het het hier geen plek waar wij jou gaan aanprijzen hoe goed je script is...

2.) Dat border probleem, staat ie in quirks? Welk Doctype gebruik je?

edit:

Toch jammer dat niemand meer iets zegt. was benieuwd wat jullie er van vonden

3.) We mógen reageren, het hoéft niet. Je probleem is iig opgelost, daar kwam je voor. Heb je uiteindelijk toch nog die reactie gekregen waar je om vroeg

[ Voor 15% gewijzigd door Verwijderd op 12-05-2004 16:45 ]

donderdag 13 mei 2004 11:28

Acties:

1st_Ro

@MBV, ik zie dat het je 'bijna' is gelukt. Goed werk

[ Voor 53% gewijzigd door 1st_Ro op 13-05-2004 11:29 ]

donderdag 13 mei 2004 13:25

Acties:

MBV

Topicstarter

@jorgen: sorry, ik heb dat wel vaker. Heb ik een probleem opgelost (waar de TS om vroeg, of waar ikzelf om vroeg), is het topic dood. Niemand die zegt of er nog wat mee is gedaan, of dat het probleem ermee is opgelost. Vind ik irritant. Maar je hebt gelijk, hier is het niet nodig.

Doctype is xhtml 1.0 transitional. Dat zou idd kunnen helpen, maar omdat het onderdeel is van een andere site doe ik dat nog even niet. Hij is voor transitional nog niet eens valid ivm '&' tekens in links. En tja, moeten mensen maar een echte browser gebruiken

Pagina: 1

Reageer