asked on

Possible to use showtrail in excel

Hi!

A java script called showtrail is a nice effect for pictures

My question is, is it possible to use showtrail in excel ?

SiddharthRout

Is this what you want? Sample File Attached.

Sid

Dim boolEntry As Boolean
Dim OldHeight As Long
Dim OldWidth As Long

Private Sub Image1_MouseMove(ByVal Button As Integer, _
ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
    If boolEntry = False Then Exit Sub
    boolEntry = False
    Image1.Height = OldHeight + 10
    Image1.Width = OldWidth + 10
End Sub

Private Sub UserForm_Initialize()
    boolEntry = True
    OldHeight = Image1.Height
    OldWidth = Image1.Width
End Sub

Private Sub UserForm_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, _
ByVal X As Single, ByVal Y As Single)
    If boolEntry = True Then Exit Sub
    boolEntry = True
    Image1.Height = OldHeight
    Image1.Width = OldWidth
End Sub

Open in new window

Mouseover-Effect.xls

team2005

ASKER

Hi!

Need same effect as showtrail, when i use mouseover on a picture.

SiddharthRout

Could you please define showtrail?

Sid

team2005

ASKER

Hi!

Here is example of showtrial

http://www.dutyfree.no/trn/trncms.nsf/pages/parfyme_sok?open&dbs=A2EC9E75161F2F0AC12574A30060B5C2

Maby i just want to make a article list with css
That have this Titles in a table

Picture Beskrivelse Pris

And with the effect showtrail on the small pictures

Any body have an good example

SiddharthRout

You mean darken the picture on mouse over?

Sid

team2005

ASKER

Hi!

No, if you test this on this URL:
http://www.dutyfree.no/trn/trncms.nsf/pages/parfyme_sok?open&dbs=A2EC9E75161F2F0AC12574A30060B5C2

From the Text : Boss femme...
If you point over the picture on the left, it wil show a window with a bigger picture.
Here they are using showtrial.

Have made a table myself now, but need to put this showtrial effect to my pictures.

<!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">
<h3>Artikkler</h3>
            <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><img alt="Angry face" src="andebryst_horeca.gif" 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="heland.gif"></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="heland.gif"></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="heland.gif"></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="heland.gif"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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 alt="Angry face" src="heland.gif"></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

SiddharthRout

Got it...

Few moments :)

Sid

SiddharthRout

Sample File Attached.

Is this what you want?

I am assigning picture of image2 from image1. You may assign any other picture if you want.

Sid

Code Used

Private Sub Image1_MouseMove(ByVal Button As Integer, _
ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
    Image2.Picture = Image1.Picture
    Image2.Visible = True
End Sub

Private Sub UserForm_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, _
ByVal X As Single, ByVal Y As Single)
   Image2.Visible = False
End Sub

Open in new window

Mouseover-Effect.xls

team2005

ASKER

Hi!

No, this is not what i want.

I want to use showtrial script
But cant find the script in google...

But i can use html insted of excel...

Please sombody tell me where to download this script

SiddharthRout

1) Do you want to do this in Excel or HTML?
2) You said that you want a bigger picture when you mouse over a small picture?

I am sorry, I am not able to understand you.

Sid

team2005

ASKER

Hi!

I was first asking if the script -> showtrial
Can be used in excel...

But if not, i can use html insted...

Have found java script now, include this
But cant get it to 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

ASKER CERTIFIED SOLUTION

SiddharthRout

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

team2005

ASKER

Hi!

Ok, but used the script included on my last post.
But cant get this to work ?

SiddharthRout

You cannot do that in Excel. That is what I am trying to tell you...

Sid