Картинки в картинке
изложу суть дела
есть таблица фоном которой являеться картинка (FON.GIF) в нутри таблицы вставлена еще таблица фоновая картинка (METKA.GIF) которой должна менять свое положение в зввисимости от нажатой ссылки мало того при нажатии одной из сылок фоновая картинку 1-й таблицы таже должна поменяться из этого имеем: 2-е картинки фона 1-й таблицы (возможно 2 и более) - FON_1.GIF, FON_2.GIF и 1-у картинку метку позицианирующую во 2-й таблице поверх 1-й - METKA.GIF вот пример исходного кода таблицы со ссылками:
<style type="text/css">
<!--
.zn_fon_1{background-image: url(FON_1.GIF);background-repeat: no-repeat;}
.zn_fon_2{background-image: url(FON_2.GIF);background-repeat: no-repeat;}
.zn_metka_1{background-image: url(metka.png);background-repeat: no-repeat;background-position: 50px 50px;}
.zn_metka_2{background-image: url(metka.png);background-repeat: no-repeat;background-position: 50px 100px;}
.zn_metka_3{background-image: url(metka.png);background-repeat: no-repeat;background-position: 100px 50px;}
.zn_metka_4{background-image: url(metka.png);background-repeat: no-repeat;background-position: 70px 150px;}
-->
</style>
<table width="700" height="374" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
<ul>
<li><a href="">фон_1_50_50</a></li>
<li><a href="">фон_1_50_100</a></li>
<li><a href="">фон_2_100_50</a></li>
<li><a href="">фон_2_70_150</a></li>
</ul>
</td>
<td width="500" align="left" valign="top" id="zn_fon">
<table width="500" height="374" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="zn_metka"> </td>
</tr>
</table>
</td>
</tr>
</table>
Прошу помочь в решении данного вопроса по внедрению Java скрипта позволяющего обеспечить указанный выше функционал для тех кто не совсем понял смысл вот предоставляю 2 ссылки работы данного функционала но на ПХП (мне же нужно на Ява) вариант 1 (фон 1 метка 1) вариант 2 (фон 1 местка 2) вариант 3 (фон 2 метка 3) |
Возможна небольшая вариация через ДИВ
<style type="text/css">
<!--
.zn_fon_1{background-image: url(FON_1.GIF);background-repeat: no-repeat;}
.zn_fon_2{background-image: url(FON_2.GIF);background-repeat: no-repeat;}
.zn_fon_3{background-image: url(FON_3.GIF);background-repeat: no-repeat;}
.zn_metka_1{background-image: url(metka.png);background-repeat: no-repeat;background-position: 50px 50px;}
.zn_metka_2{background-image: url(metka.png);background-repeat: no-repeat;background-position: 50px 100px;}
.zn_metka_3{background-image: url(metka.png);background-repeat: no-repeat;background-position: 100px 50px;}
.zn_metka_4{background-image: url(metka.png);background-repeat: no-repeat;background-position: 70px 150px;}
.zn_metka_5{background-image: url(metka.png);background-repeat: no-repeat;background-position: 157px 210px;}
.zn_metka_6{background-image: url(metka.png);background-repeat: no-repeat;background-position: 38px 200px;}
#metka {
position: relative;
width:50px;
height:50px;
z-index:1;
top: 50px;
left: 150px;
}
-->
</style>
<table width="700" height="374" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
<ul>
<li><a href="">фон_1_50_50</a></li>
<li><a href="">фон_1_50_100</a></li>
<li><a href="">фон_2_100_50</a></li>
<li><a href="">фон_2_70_150</a></li>
<li><a href="">фон_2_157_210</a></li>
<li><a href="">фон_3_38_200</a></li>
</ul>
</td>
<td width="500" align="left" valign="top" id="zn_fon"><div id="metka"><img src="metka.png"></div></td>
</tr>
</table>
может через него будет и проще :) |
проблему решил сам :)
<html>
<head>
<style type="text/css">
<!--
.zn_fon_1{background-image: url(fon_1.jpg);background-repeat: no-repeat;}
.zn_fon_2{background-image: url(fon_2.jpg);background-repeat: no-repeat;}
.zn_fon_3{background-image: url(fon_3.jpg);background-repeat: no-repeat;}
-->
</style>
</head>
<body>
<table width="700" height="374" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
<ul>
<li><a href="#" onClick="showmetka(1,50,100)">фон_1_50_100</a></li>
<li><a href="#" onClick="showmetka(1,50,50)">фон_1_50_50</a></li>
<li><a href="#" onClick="showmetka(2,100,50)">фон_2_100_50</a></li>
<li><a href="#" onClick="showmetka(2,70,150)">фон_2_70_150</a></li>
<li><a href="#" onClick="showmetka(2,157,210)">фон_2_157_210</a></li>
<li><a href="#" onClick="showmetka(3,38,200)">фон_3_38_200</a></li>
</ul>
</td>
<td width="500" align="left" valign="top" id="zn_fon">
<div name="metka" id="metka" style="visibility:hidden; display:none; position:relative;"><img src="metka.png"></div>
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
<!--
function showmetka (fon,top,left) {
td = 'zn_fon_'+fon;
div = 'm_'+top+'_'+left;
var tdimg = document.getElementById("zn_fon");
tdimg.className = td;
var divimg = document.getElementById("metka");
divimg.style.visibility = "hidden";
divimg.style.display = "none";
divimg.style.top = top;
divimg.style.left = left;
divimg.style.visibility = "visible";
divimg.style.display = "block";
}
//-->
</script>
|
| Часовой пояс GMT +3, время: 22:21. |