Forum PHP.pl

Witam jestem w trakcie robienia strony i napotkałem jeden problem.
Strona jest o prognozowaniu pogody. Zrobiłem panel do wystawiania prognozy typu temperatura wiatr ciśnienie i inne parametry. Wszystko zapisuje mi się w bazie danych MySQL. Na stronie zrobiłem też mapkę województwa gdzie nanoszone są wartości z bazy danych. Robię to przez <iframe> ale nie do końca jestem z tego zadowolony. Czy istnieje jakiś inny sposób na umieszczenie tego w odpowiedniej pozycji na mapie?
Tak to wygląda do strony przeglondarki.
http://djdandi.nazwa.pl/PHP-Fusion-9.00/in...ogoda_dzien.php
Tak wygląda kod php

[PHP] pobierz, plaintext 
<?php
require_once "../../maincore.php";
require_once THEMES."templates/header.php";
include INFUSIONS."prognozadzien_infusion/infusion_db.php";
include INFUSIONS."prognozadzien_infusion/locale/English.php";
?>
<link href="pogodadzien.css" rel="stylesheet">
<?php
echo '<table border="0" cellpadding="0" cellspacing="0" class="tlo2">
<tr>';
  echo '<td><iframe src="http://djdandi.nazwa.pl/PHP-Fusion-9.00/infusions/prognozadzien_infusion/obszar1.php" frameborder="0" class="obszar1"></iframe></td>';
  echo '<td><iframe src="http://djdandi.nazwa.pl/PHP-Fusion-9.00/infusions/prognozadzien_infusion/obszar2.php" frameborder="0" class="obszar2"></iframe></td>';
  echo '<td><iframe src="http://djdandi.nazwa.pl/PHP-Fusion-9.00/infusions/prognozadzien_infusion/obszar3.php" frameborder="0" class="obszar3"></iframe></td>';
  echo '<td><iframe src="http://djdandi.nazwa.pl/PHP-Fusion-9.00/infusions/prognozadzien_infusion/obszar4.php" frameborder="0" class="obszar4"></iframe></td>';
  echo '<td><iframe src="http://djdandi.nazwa.pl/PHP-Fusion-9.00/infusions/prognozadzien_infusion/obszar5.php" frameborder="0" class="obszar15"></iframe></td>';
echo '</tr>
</table>';
?>
[PHP] pobierz, plaintext 

Plik pogodadzien.css który odpowiada za pozycje na mapie.

[PHP] pobierz, plaintext 
.tlo2 {
	background: url(images/dzien.png) no-repeat left;
	width: 276px;
	height:273px;
}
 
.temp {
	font-family: Tahoma,Verdana,Segoe,sans-serif; 
	font-size: 11px; 
	font-style: normal; 
	font-variant: normal;
}
 
.obszar1 {
	position: relative; left: 35px; top: -45px;
	width: 206px;
}
.obszar2 {
	position: relative; left: -48px; top: -60px;
	width: 206px;
}
.obszar3 {
	position: relative; left: -380px; top: 35px;
	width: 206px;
}
.obszar4 {
	position: relative; left: -470px; top: 65px;
	width: 206px;
}
.obszar15 {
	position: relative; left: -800px; top: 110px;
	width: 206px;
}
.cisnienie {
	position: relative; left: -900px; top: 170px;
	width: 206px;
}
[PHP] pobierz, plaintext 

Za pomoc będę wdzięczny wspomnę jeszcze otym, że zależy mi, aby strona była responsywna na chwilę obecną nie jest.

Iframe do tego celu to kiepski pomysł. Ja bym zrobił mapę w SVG, wtedy zyskujesz co najmniej dwie rzeczy:

1. Możesz łatwo manipulować zawartością obrazka, nanosić na niego co tylko chcesz
2. Obrazek będzie ostry na każdym możliwym wyświetlaczu

Inne opcje to generowanie obrazka rastrowego z PHP GD, a jeszcze inna to canvas.

Jak zwykle pojawiają się kolejne problemy tym razem nie mogę przerobić mapki do formatu .svg