Картинки в картинке

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем wcbfalcon, 16 июл 2008.

  1. wcbfalcon

    wcbfalcon Гость

    изложу суть дела :D
    есть таблица
    фоном которой являеться картинка (FON.GIF)
    в нутри таблицы вставлена еще таблица фоновая картинка (METKA.GIF) которой должна менять свое положение в зввисимости от нажатой ссылки :D
    мало того при нажатии одной из сылок фоновая картинку 1-й таблицы таже должна поменяться
    из этого имеем:
    2-е картинки фона 1-й таблицы (возможно 2 и более) - FON_1.GIF, FON_2.GIF
    и 1-у картинку метку позицианирующую во 2-й таблице поверх 1-й - METKA.GIF

    вот пример исходного кода таблицы со ссылками

    Код (Text):
    <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)
     
  2. Xazzkep

    Xazzkep Гость

    Этот момент поточнее проясни :)
     
  3. wcbfalcon

    wcbfalcon Гость

    вот вставь куда либо этот код и посмотри что я имелл введу в данном случае увидеш 1 таблицу с 2 строками в каждой строке еще одна таблица фоновая картинка которой спозиционированна по разному
    (картинка с именем fon_1.jpg имеет разрешение 500х374
    картинка с именем metka.gif расрешение 50х50)
    Код (Text):
    <style type="text/css">
    <!--
    #zn_fon_1{background-image: url(fon_1.jpg);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: 150px 100px;}
    -->
    </style>

    <table width="504" height="374" border="1" cellpadding="0" cellspacing="0">
    <tr>
    <td width="500" align="left" valign="top" id="zn_fon_1">
    <table width="500" height="374" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td id="zn_metka_1"></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr>
    <td align="left" valign="top" id="zn_fon_1">
    <table width="500" height="374" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td id="zn_metka_2"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
     
  4. wcbfalcon

    wcbfalcon Гость

    Возможна небольшая вариация через ДИВ
    Код (Text):
    <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>
    может через него будет и проще :)
     
  5. wcbfalcon

    wcbfalcon Гость

    мда немного посидев помыслив проблему решил сам :)
    путем использования слоя
    Код (Text):
    <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>
     
Загрузка...

Поделиться этой страницей