JS problem z pozycja obrazka

0

Witam, pracuje nad pewnym dosyc sporym skryptem a w zasadzie pracowalem bo go juz skonczylem :) tylko ze dopiero po skonczeniu go dotarlo do mnie ze nie kazdy ma taka sama rozdzielczosc co ja a caly skrypt jest oparty o konkretne piksele i tu mam problem. Udalo mi sie skrypt na tyle przerobic ze wystarczy pobrac tylko pozycje x,y danego obrazka i juz wszystko bedzie dzialac bez problemow, tylko ze w tym tkwi moj problem. mam tabele width = 100% podzielona na piec td width = 20%, teraz w kazdym td mam obrazek no i w jaki sposob mam pobrac jego pozycje x,y w px?
Probowalem napisac skrypt ktory by mi nalozyl na siebie 2 obrazki celu znalezienie jakiegos rozwiazanie mojego problemu, napisalem to w taki sposob:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dokument bez nazwy</title>
<SCRIPT LANGUAGE = "JavaScript">
var wx;
var wy;
var tabx, taby, tx, ty, ox, oy;
function sprawdz()
{
	tabx = document.getElementById('tab').offsetLeft;
	taby = document.getElementById('tab').offsetTop;
	tx = document.getElementById('t0').offsetLeft;
	ty = document.getElementById('t0').offsetTop;
	ox = document.getElementById('ob').offsetLeft;
	oy = document.getElementById('ob').offsetTop;
	wx = tabx + tx + ox;
	wy = taby + ty + oy;
	document.getElementById('tekst').innerHTML = 'wx='+wx+' wy='+wy+' tabx='+tabx+' taby='+taby+' tx='+tx+' ty='+ty+' ox='+ox+' oy='+oy;
	document.getElementById('ob1').style.left = wx;
	document.getElementById('ob1').style.top = wy;
	
}
</SCRIPT>
</head>

<body>
<table id="tab" width="100%" border="0">
  <tr>
    <td id="t0" width="20%"><div align="center"><img src="tlo.JPG" name="ob" width="100" height="28" id="ob"/></div></td>
    <td id="t1" width="20%"><div align="center"></div></td>
    <td id="t2" width="20%"><div align="center"></div></td>
    <td id="t3" width="20%"><div align="center"></div></td>
    <td id="t4" width="20%"><div align="center"></div></td>
  </tr>
</table>
<img id="ob1" src="tlo.JPG" style="position:absolute; top:200px; left:0px; width:100px; height:28px;"/>
<p onclick="sprawdz()">Kliknij</p>
<p id="tekst">sardrasd</p>
</body>
</html>

No i w firefoxie obrazka mi nie przesuwa, natomiast w IE przesuwa ale nie nakladaja sie, poza tym wynik poszczegolnych zmiennych w Firefoxie i IE sa rozne od siebie. Prosze o pomoc jak sobie z tym poradzic.

0

nie da się poradzic ze wszystkimi odchyłami IE. albo trzeba pisac oddzielne wersje skryptow i plikow na IE (szczegolnie < 8) albo umiescic napis jesli zostanie wykryty IE ze 'Twoja przegladarka nie nadaje sie do przegladania internetu'

0

nie używaj tabel
ie jest inne, ale wg mnie trzeba starać się napisać skrypt tak by działał dobrze na wszystkich przeglądarkach. tłumaczenia na stronie że strona się sypie bo masz ie nie jest mądre

0

Posluchalem waszych rad i zamienilem tabele na divy, no i wynik przeszedl moje oczekiwania :), pozycje pobiera juz prawidlowa obojetnie ile divow ustawie, no ale mam problem i, co mnie osobiscie zdziwilo, nie z IE tylko Firefoxem, po kliknieciu pozycje pobiera ale nie przesuwa obrazka, kod wyglada tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dokument bez nazwy</title>
<SCRIPT LANGUAGE = "JavaScript">
var wx;
var wy;
function sprawdz()
{
	wx = document.getElementById('ob').offsetLeft;
	wy = document.getElementById('ob').offsetTop;
	
	document.getElementById('ob1').style.left = wx;
	document.getElementById('ob1').style.top = wy;
	document.getElementById('tekst').innerHTML = 'wx='+wx+' wy='+wy;
}
</SCRIPT>
</head>

<body>
<div style="position:absolute; top:0px; left:0px; width:100%">
 <div style="float:left; width:40%;"><center><img id='ob' src="tlo.JPG" width="100" height="28" /></center></div>
 <div style="float:left; width:40%;"><center><img id='ob' src="tlo.JPG" width="100" height="28" /></center></div>
</div>
<img id='ob1' src="tlo.JPG" style="position:absolute; top:992px; left:0px; width:100px; height:28px;"/>
<br>
<p onclick="sprawdz()">Kliknij</p>
<p id="tekst">sardrasd</p>
</body>
</html>

Czy ktos wie jak to naprawic?

1 użytkowników online, w tym zalogowanych: 0, gości: 1