Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

Script dosent work

Hi!

Have a list of articles, and wehere the first picture
i want a effect on. When user mouse over the picture,
it must use the included script. But it dosent work ?


<script language = "javascript">

/*Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,-25];
//image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0;
//duration in seconds image should remain visible. 0 for always.

var currentimageheight = 170;      // maximum image size.
if (document.getElementById || document.all){
      document.write('<div id="trailimageid">');
      document.write('</div>');
}

function gettrailobj(){
if (document.getElementById)
      return document.getElementById("trailimageid").style
else if (document.all)
      return document.all.trailimagid.style
}

function gettrailobjnostyle(){
      if (document.getElementById)
            return document.getElementById("trailimageid")
      else if (document.all)
            return document.all.trailimagid
}

function truebody(){
      return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename, imagenum, license, caption, showthumb, brand, imageid){
      //Only do this if the person wants it
      if(document.hoverForm.showComp.selectedIndex==0) {
            if (imageid > 0) {
                  var width = getImageWidth(imageid);
                  var height = getImageHeight(imageid);
            }
            //if (height > 0){
                  //      currentimageheight = height;
            //}
            //alert(getImageHeight(imageid));
            //alert(currentimageheight);
            document.onmousemove=followmouse;
            newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
            
            if (showthumb > 0){
                  newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
            }

            newHTML = newHTML + '<b>' + brand + '</b><br>';

            newHTML = newHTML + '<span class="blah">Image# ' + imagenum + ' (' + license + ')</span><br>';
            newHTML = newHTML + '<span class="blah">' + unescape(caption) + '</span>';
            newHTML = newHTML + '</div>';

            gettrailobjnostyle().innerHTML = newHTML;
            gettrailobj().visibility="visible";
      }
}

function hidetrail(){
      if(document.hoverForm.showComp.selectedIndex==0) {
            gettrailobj().visibility="hidden"
            document.onmousemove=""
            gettrailobj().left="-500px"
      }
}

function followmouse(e){
      var xcoord=offsetfrommouse[0]
      var ycoord=offsetfrommouse[1]
      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
      
      //if (document.all){
            //gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
      //} else {

            //gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
      //}

      if (typeof e != "undefined"){
            if (docwidth - e.pageX < 300){
                  xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += e.pageX;
            }
            if (docheight - e.pageY < (currentimageheight + 110)){
                  ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
            } else {
                  ycoord += e.pageY;
            }
      } else if (typeof window.event != "undefined"){
            if (docwidth - event.clientX < 300){
                  xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += truebody().scrollLeft+event.clientX
            } if (docheight - event.clientY < (currentimageheight + 110)){
                  ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
            } else {            
                  ycoord += truebody().scrollTop + event.clientY;
            }
      }

      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
      gettrailobj().left=xcoord+"px"
      gettrailobj().top=ycoord+"px"
}

</script>

''''''''''''''''HTML CODE ''''''''''''''''''''''

<tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"><a id="3" onmouseover     ="showtrail('http://www.test.com/images/3.jpg', '3', 'Test', 'Test description.', '1', 'TestTitle','3');" onmouseout=hidetrail(); href="link.aspx" >Test Link</a></td>
    <td align="middle">12030</td>
    <td>HEL KYLLING, 4STK, à ca2,5kg</td>
    <td align="middle">CA 10,00</td>
    <td align="middle">32</td>
    <td align="middle">KG</td>
  </tr>

But this dosent work ?

Open in new window

0
team2005
Asked:
team2005
  • 4
  • 3
1 Solution
 
wmadrid1Commented:
Good day,
yo did not put the code of functions
getImageWidth
getImageHeight
but you don't use it

Also, you didnt attac the html code of
document.hoverForm.showComp

So, just commenting some lines, i tried te code, and it worled for me on IE and FF

<script language = "javascript">

/*Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,-25];
//image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0;
//duration in seconds image should remain visible. 0 for always.

var currentimageheight = 170;      // maximum image size.
if (document.getElementById || document.all){
      document.write('<div id="trailimageid">');
      document.write('</div>');
}

function gettrailobj(){
if (document.getElementById)
      return document.getElementById("trailimageid").style
else if (document.all)
      return document.all.trailimagid.style
}

function gettrailobjnostyle(){
      if (document.getElementById)
            return document.getElementById("trailimageid")
      else if (document.all)
            return document.all.trailimagid
}

function truebody(){
      return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename, imagenum, license, caption, showthumb, brand, imageid){
      //Only do this if the person wants it
      //if(document.hoverForm.showComp.selectedIndex==0) {

            //if (imageid > 0) {
            //      var width = getImageWidth(imageid);
            //      var height = getImageHeight(imageid);
            //}
            //if (height > 0){
                  //      currentimageheight = height;
            //}
            //alert(getImageHeight(imageid));
            //alert(currentimageheight);
            document.onmousemove=followmouse;
            newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
            
            if (showthumb > 0){
                  newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
            }

            newHTML = newHTML + '<b>' + brand + '</b><br>';

            newHTML = newHTML + '<span class="blah">Image# ' + imagenum + ' (' + license + ')</span><br>';
            newHTML = newHTML + '<span class="blah">' + unescape(caption) + '</span>';
            newHTML = newHTML + '</div>';

            gettrailobjnostyle().innerHTML = newHTML;
            gettrailobj().visibility="visible";
      //}
}

function hidetrail(){
      //if(document.hoverForm.showComp.selectedIndex==0) {
            gettrailobj().visibility="hidden"
            document.onmousemove=""
            gettrailobj().left="-500px"
      //}
}

function followmouse(e){
      var xcoord=offsetfrommouse[0]
      var ycoord=offsetfrommouse[1]
      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
      
      //if (document.all){
            //gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
      //} else {

            //gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
      //}

      if (typeof e != "undefined"){
            if (docwidth - e.pageX < 300){
                  xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += e.pageX;
            }
            if (docheight - e.pageY < (currentimageheight + 110)){
                  ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
            } else {
                  ycoord += e.pageY;
            }
      } else if (typeof window.event != "undefined"){
            if (docwidth - event.clientX < 300){
                  xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += truebody().scrollLeft+event.clientX
            } if (docheight - event.clientY < (currentimageheight + 110)){
                  ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
            } else {            
                  ycoord += truebody().scrollTop + event.clientY;
            }
      }

      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
      gettrailobj().left=xcoord+"px"
      gettrailobj().top=ycoord+"px"
}

</script>

''''''''''''''''HTML CODE ''''''''''''''''''''''

<tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"><a id="3" onmouseover     ="showtrail('http://www.test.com/images/3.jpg', '3', 'Test', 'Test description.', '1', 'TestTitle','3');" onmouseout=hidetrail(); href="link.aspx" >Test Link</a></td>
    <td align="middle">12030</td>
    <td>HEL KYLLING, 4STK, à ca2,5kg</td>
    <td align="middle">CA 10,00</td>
    <td align="middle">32</td>
    <td align="middle">KG</td>
  </tr>

But this dosent work ?

Open in new window

0
 
team2005Author Commented:
Hi!

Have a testpage on web:
http://www.singelnett.no/sadasd.htm

Dosent work ?
0
 
wmadrid1Commented:
You are referencing a form wich does not exists on the HTML:
hoverForm


 if(document.hoverForm.showComp.selectedIndex==0) {
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
team2005Author Commented:
Hi!

What must the line be ?
if(document.hoverForm.showComp.selectedIndex==0) {

Please help ASAP
0
 
wmadrid1Commented:
Hello,

You maybe could drop these lines, as in my first post, i commented it.
O you could too add te HTML to work wit te supposed select tag, someting like:
<form name="hoverForm">
<select name="showComp">
<option value=0>With trail</option>
<option value=1>Without trail</option>
</select>
</form>
0
 
team2005Author Commented:
Hi!

Tryed your first post, but dosent work ?

Include the source for:
http://www.singelnett.no/sadasd.htm

Hope you can modify my code, so it wil work

Thanks you
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" >
<title>sadasd</title>
</head>
<body bgcolor="#ffffff">



<script language = "javascript">

/*Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,-25];
//image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0;
//duration in seconds image should remain visible. 0 for always.

var currentimageheight = 170;      // maximum image size.
if (document.getElementById || document.all){
      document.write('<div id="trailimageid">');
      document.write('</div>');
}

function gettrailobj(){
if (document.getElementById)
      return document.getElementById("trailimageid").style
else if (document.all)
      return document.all.trailimagid.style
}

function gettrailobjnostyle(){
      if (document.getElementById)
            return document.getElementById("trailimageid")
      else if (document.all)
            return document.all.trailimagid
}

function truebody(){
      return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename, imagenum, license, caption, showthumb, brand, imageid){
      //Only do this if the person wants it
      //if(document.hoverForm.showComp.selectedIndex==0) {

            //if (imageid > 0) {
            //      var width = getImageWidth(imageid);
            //      var height = getImageHeight(imageid);
            //}
            //if (height > 0){
                  //      currentimageheight = height;
            //}
            //alert(getImageHeight(imageid));
            //alert(currentimageheight);
            document.onmousemove=followmouse;
            newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
            
            if (showthumb > 0){
                  newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
            }

            newHTML = newHTML + '<b>' + brand + '</b><br>';

            newHTML = newHTML + '<span class="blah">Image# ' + imagenum + ' (' + license + ')</span><br>';
            newHTML = newHTML + '<span class="blah">' + unescape(caption) + '</span>';
            newHTML = newHTML + '</div>';

            gettrailobjnostyle().innerHTML = newHTML;
            gettrailobj().visibility="visible";
      //}
}

function hidetrail(){
      //if(document.hoverForm.showComp.selectedIndex==0) {
            gettrailobj().visibility="hidden"
            document.onmousemove=""
            gettrailobj().left="-500px"
      //}
}

function followmouse(e){
      var xcoord=offsetfrommouse[0]
      var ycoord=offsetfrommouse[1]
      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
      
      //if (document.all){
            //gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
      //} else {

            //gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
      //}

      if (typeof e != "undefined"){
            if (docwidth - e.pageX < 300){
                  xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += e.pageX;
            }
            if (docheight - e.pageY < (currentimageheight + 110)){
                  ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
            } else {
                  ycoord += e.pageY;
            }
      } else if (typeof window.event != "undefined"){
            if (docwidth - event.clientX < 300){
                  xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
            } else {
                  xcoord += truebody().scrollLeft+event.clientX
            } if (docheight - event.clientY < (currentimageheight + 110)){
                  ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
            } else {            
                  ycoord += truebody().scrollTop + event.clientY;
            }
      }

      var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
      var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
      gettrailobj().left=xcoord+"px"
      gettrailobj().top=ycoord+"px"
}

</script>





<table style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; MARGIN: 0px auto; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid" border="0" width="800">
  
  <tr>
<th>Artikkler Gårdsand pr 25.02.2011</th></tr>
</table>
            <div class="ping">
             <table style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; MARGIN: 0px auto; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid" border="0" width="800">
<thead>
        <tr>
           <th width="60" align="left" bgcolor="#e5eecc">Bilde</th>
           <th width="90" align="left" bgcolor="#e5eecc">Varenummer</th>
           <th width="450" align="left" bgcolor="#e5eecc">Produkt navn</th>
           <th width="80" align="left" bgcolor="#e5eecc">Antall KS</th>   
           <th width="60" align="left" bgcolor="#e5eecc">Antall KS/Pall</th> 
          <th width="120" align="left" bgcolor="#e5eecc">Salgs enhet</th> 
        </tr>
  <tr>
    <td border><img alt="Angry face" src="imgtest/andebryst.jpg" width="90" height="90"></td>
    <td align="middle">21010</td>
    <td>ANDEBRYST 4-PK, 6x1,2kg</td>
    <td align="middle">CA 7,20</td>
    <td align="middle">48</td>
    <td align="middle">KG</td></tr>
  <tr>
  <tr>
    <td><img alt="Angry face" src="imgtest/andebryst.jpg" width="90" height="90"></td>
    <td align="middle">21080</td>
    <td>ANDELÅR 4-PK, 6x1kg</td>
    <td align="middle">CA 6,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td></tr>
  <tr>
    <td><img alt="Angry face" src="imgtest/andeconfit_horeca.jpg" width="90" height="90"></td>
    <td align="middle">11030</td>
    <td>HEL AND 4 STK, à ca2,5kg</td>
    <td align="middle">CA 10,00</td>
    <td align="middle">32</td>
    <td align="middle">KG</td></tr>
  <tr>
    <td><img alt="Angry face" src="imgtest/andeconfit_horeca.jpg" width="90" height="90"></td>
    <td align="middle">31010</td>
    <td>ANDECONFIT 10-PK, 3x2,5kg</td>
    <td align="middle">CA 7,50</td>
    <td align="middle">40</td>
    <td align="middle">KG</td>
  </tr>
   <tr>
    <td><img alt="Angry face" src="imgtest/ander_horeca.jpg" width="90" height="90"></td>
    <td align="middle">41010</td>
    <td>ANDEPØLSE, 5x1kg</td>
    <td align="middle">CA 5,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">43010</td>
    <td>ANDEPATÈ, 10x0,5kg</td>
    <td align="middle">CA 5,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">31060</td>
    <td>VARMRØKT ANDEBRYST 2-PK, 15x0,5kg</td>
    <td align="middle">CA 7,50</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">51010</td>
    <td>SPEKET ANDEBRYST 2-PK, 15x0,3kg</td>
    <td align="middle">CA 4,50</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22040</td>
    <td>KYLLINGBRYST 4-PK, 6x1,5kg</td>
    <td align="middle">CA 9,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22070</td>
    <td>KYLLINGLÅR 3-PK, 6x1kg</td>
    <td align="middle">CA 6,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22080</td>
    <td>KYLLINGKLUBBE 8-PK, 6x1,2kg</td>
    <td align="middle">CA 7,20</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22090</td>
    <td>KYLLING OVERLÅR 6-PK, 6x1,2kg</td>
    <td align="middle">CA 7,20</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22100</td>
    <td>KYLLING OVERVINGE, 6x1kg</td>
    <td align="middle">CA 6,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img alt="Angry face" src="heland.gif" width="90" height="90"></td>
    <td align="middle">22110</td>
    <td>KYLLINGVINGER, 6x1kg</td>
    <td align="middle">CA 6,00</td>
    <td align="middle">48</td>
    <td align="middle">KG</td>
  </tr>
  
   <tr>
    <td><img id="3" onmouseover="showtrail('http://www.singelnett.no/imgtest/andebryst.jpg', '3', 'Test', 'Test description.', '1', 'TestTitle','3');" onmouseout="hidetrail();" alt="Angry face" src="imgtest/ander_horeca.jpg" width="90" height="90"  href="link.aspx" > </a></td>
    <td align="middle">12030</td>
    <td>HEL KYLLING, 4STK, à ca2,5kg</td>
    <td align="middle">CA 10,00</td>
    <td align="middle">32</td>
    <td align="middle">KG</td>
  </tr>
   
    </thead>
  
  <tr></tr></table></div></body></html>

Open in new window

0
 
team2005Author Commented:
Thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now