sammel: LENSE über 2tes Bild

SELF-Forum

LENSE über 2tes Bild

sammel Homepage des Autors
– Informationen zu den Bewertungsregeln

guten TAG ich schaffs einfach nicht die LINSE über das 2te bild zubekommen

BITTE um Hilfe wie das geht
muss da das Script gedoppelt werden mit anderen variablen

www.tv-profi-gmbh.de --> Kaffeestudio

DANKE

Quellcode

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
  <title>TV Profi GmbH - Helmut Kern - Service</title>
  <meta name="auhtor" content="Sammel/Mang" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="language" content="de" />
  <meta name="copyright" content="2007 by TV Profi GmbH" />
  <link rel="stylesheet" type="text/css" href="../styles/screen.css" media="screen" />
  <link rel="stylesheet" type="text/css" href="../styles/print.css" media="print" />
<script language="javascript"><!--
function popupWindow(url, text, win_width, win_height) {
  var popup = window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width='+win_width+',height='+win_height+',screenX=150,screenY=150,top=150,left=150')
  popup.Text = text;
}

var TimeStart   = new Date();
function vxSimpleCounter(s,name) {
 var p       =   document.getElementById(name);
 var TimeNow =   new Date();
 var TimeLeft=   ((s*1000) - (TimeNow.getTime()-TimeStart.getTime()))/1000;
 if (TimeLeft>0) {
  var Stunden =   parseInt(TimeLeft / (60*60));
  TimeLeft    =   TimeLeft-(Stunden*(60*60));
  var Minuten =   parseInt(TimeLeft / (60));
  TimeLeft    =   TimeLeft-(Minuten*(60));
  var Sekunden=   parseInt(TimeLeft);
  if (Stunden<10) Stunden="0"+Stunden;
  if (Minuten<10) Minuten="0"+Minuten;
  if (Sekunden<10)Sekunden="0"+Sekunden;
  var TimeStr =   Stunden+":"+Minuten+":"+Sekunden;
  p.innerHTML =   TimeStr;
  window.setTimeout("vxSimpleCounter("+s+",'"+name+"')",1000);
 }
}
//--></script>

</head>
<body id="page">
<center>
<table cellpadding="0" cellspacing="0" id="contenttbl" width="800">
  <tr>
    <td id="contentheader" width="200"><font size="2">KAFFEE-STUDIO</font></td>
  </tr>
  <tr>
    <td id="contenttext" width="800" align="center">
      <center>
   <script src="../js/proto_150rc1_compressed.js"></a>" type="text/javascript"></script>

<div id="zoom" style="position:relative; left:0px; top:0px; z-index:0;">
      <div id="lens" style="position:absolute; z-index:1; visibility:hidden; border:1px solid #a7a28c;"><img src="../images/kaffee_a.jpg" border="0" alt="" width="1140" height="600" hspace="5" vspace="5" id="zoom_image_full" style="position: relative; top: 0px; left: 0px"></div>
<script language="javascript"><!--
      document.write('<img src="../images/kaffee_a.jpg" border="0" alt="" width="570" height="300"  id="zoom_image_small"><br>');
      //-->
    </script>

<noscript>
      <img src="../images/kaffee_a.jpg" border="0" alt="" width="570" height="300" hspace="5" vspace="5"><br>
     </noscript>
     </div>

<script type="text/javascript">
lensSize = 150;

// Delay until document is fully loaded....
Event.observe(window, 'load', function() {
 // Get some static values in advance
 smallImageD = $('zoom_image_small').getDimensions();
 fullImageD  = $('zoom_image_full' ).getDimensions();
 smallImageP = Position.cumulativeOffset($('zoom_image_small'));

// So some calculations based on those static values
 zoomWidth  = fullImageD.width  / smallImageD.width;
 zoomHeight = fullImageD.height / smallImageD.height;
 lensSizeHalf = lensSize / 2

Event.observe('zoom', 'mousemove', move_lens);
 Event.observe('zoom', 'mouseover', function() {$('lens').setStyle({visibility: 'visible'});});
 Event.observe('zoom', 'mouseout',  function() {$('lens').setStyle({visibility: 'hidden'});});
});

// Reposition lens if neccessary
function move_lens(e) {
 var mouseX = Event.pointerX(e) - smallImageP[0];
 var mouseY = Event.pointerY(e) - smallImageP[1];

if (   mouseX < 0 || mouseX > smallImageD.width
  || mouseY < 0 || mouseY > smallImageD.height) { // Hide lens if out of zoom area

$('lens').setStyle({visibility: 'hidden'});

} else { // Show lens and reposition image and lens

$('lens').setStyle({visibility: 'visible'});

var fullImageX = - mouseX * (zoomWidth - 1);
  var fullImageY = - mouseY * (zoomHeight - 1);

var lensX = mouseX - lensSizeHalf;
  var lensY = mouseY - lensSizeHalf;

$('zoom_image_full').setStyle({
   top:  fullImageY - lensY + 'px',
   left: fullImageX - lensX + 'px'});
  $('lens').makeClipping().setStyle({
   width:  lensSize + 'px',
   height: lensSize + 'px',
   top:  lensY + 'px',
   left: lensX + 'px'});
 }
}
</script>
   </td>
 </tr>
 <tr>
   <td id="contenttext" width="800" align="center">
        <font size="4" face="Arial, Verdana"><b>Unser Kaffeestudio.</b></font>
   </td>
   </tr>
   <tr>
 <td id="contenttext" width="800" align="center">

<div id="zoom_1" style="position:relative; left:0px; top:0px; z-index:0;">
      <div id="lens_1" style="position:absolute; z-index:1; visibility:hidden; border:1px solid #a7a28c;"><img src="../images/kaffee_b.jpg" border="0" alt="" width="1268" height="666" hspace="5" vspace="5" id="zoom_image_full_1" style="position: relative; top: 0px; left: 0px"></div>
<script language="javascript"><!--
      document.write('<img src="../images/kaffee_b.jpg" border="0" alt="" width="634" height="333"  id="zoom_image_small_1"><br>');
      //-->
    </script>

<noscript>
      <img src="../images/kaffee_b.jpg" border="0" alt="" width="634" height="333" hspace="5" vspace="5"><br>
     </noscript>
</div>

</center>
 </td>
  </tr>
</table>
</center>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. LENSE über 2tes Bild

    plan_B
    – Informationen zu den Bewertungsregeln

    Hallo,

    muss da das Script gedoppelt werden mit anderen variablen

    so wird es vielleicht am Einfachsten sein. im HTML hast du ja schon die  Ids "zoom_1", "lens_1","zoom_image_small_1" ... vereinbart.

    momentan überblicke ich das ganze noch nicht, aber die globalen Variablen
    beziehen sich eben immer nur auf ein Bild.

    In dieser onload-Funktion müssten äquivalente Variablen zusätzlich definiert werden ( ein paar Beispeile habe ich schon eingefügt)

      

> Event.observe(window, 'load', function() {  
>  // Get some static values in advance  
>  smallImageD = $('zoom_image_small').getDimensions();  
  
 smallImageD_1 = $('zoom_image_small_1').getDimensions();  
  

>  fullImageD  = $('zoom_image_full' ).getDimensions();  
>  smallImageP = Position.cumulativeOffset($('zoom_image_small'));  
>   
>  // So some calculations based on those static values  
>  zoomWidth  = fullImageD.width  / smallImageD.width;  
>  zoomHeight = fullImageD.height / smallImageD.height;  
>  lensSizeHalf = lensSize / 2  
>   
>  Event.observe('zoom', 'mousemove', move_lens);  
  
 Event.observe('zoom', 'mousemove', move_lens_1);  
  

>  Event.observe('zoom', 'mouseover', function() {$('lens').setStyle({visibility: 'visible'});});  
  
  
 Event.observe('zoom', 'mouseover', function() {$('lens_1').setStyle({visibility: 'visible'});});  
  

>  Event.observe('zoom', 'mouseout',  function() {$('lens').setStyle({visibility: 'hidden'});});  
> });  
>

    zusätzlich noch eine Funktion

      
function move_lens_1(e) {  
...  
}

    wenn noch ein 3. Bild behandelt werden soll, dann ist dieser Ansatz mit dem Verdoppeln erst recht unschön.

    Gruß plan_B

    --
         *®*´¯`·.¸¸.·
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. LENSE über 2tes Bild

    Sammel Homepage des Autors
    – Informationen zu den Bewertungsregeln

    DANKE Erledigt es hat Funktioniert sieht zwar nicht schön aus auch nicht elegant mit dem Scriptaufbau aber es Läuft

    [code lang=javascript]

    function move_lens_1(e) {
     var mouseX_1 = Event.pointerX(e) - smallImageP_1[0];
     var mouseY_1 = Event.pointerY(e) - smallImageP_1[1];

    if (   mouseX_1 < 0 || mouseX_1 > smallImageD_1.width
      || mouseY_1 < 0 || mouseY_1 > smallImageD_1.height) { // Hide lens if out of zoom area

    $('lens_1').setStyle({visibility: 'hidden'});

    } else { // Show lens and reposition image and lens

    $('lens_1').setStyle({visibility: 'visible'});

    var fullImageX_1 = - mouseX_1 * (zoomWidth_1 - 1);
      var fullImageY_1 = - mouseY_1 * (zoomHeight_1 - 1);

    var lensX_1 = mouseX_1 - lensSizeHalf;
      var lensY_1 = mouseY_1 - lensSizeHalf;

    $('zoom_image_full_1').setStyle({
       top:  fullImageY_1 - lensY_1 + 'px',
       left: fullImageX_1 - lensX_1 + 'px'});
      $('lens_1').makeClipping().setStyle({
       width:  lensSize + 'px',
       height: lensSize + 'px',
       top:  lensY_1 + 'px',
       left: lensX_1 + 'px'});
     }
    }

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln