Solved

Possible to use showtrail in excel

Posted on 2011-02-16
23
335 Views
Last Modified: 2012-05-11
Hi!

A java script called showtrail is a nice effect for pictures

My question is, is it possible to use showtrail in excel ?
0
Comment
Question by:team2005
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 11
23 Comments
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34906557
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
0
 
LVL 2

Author Comment

by:team2005
ID: 34907395
Hi!

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

Expert Comment

by:SiddharthRout
ID: 34909154
Could you please define showtrail?

Sid
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.

 
LVL 2

Author Comment

by:team2005
ID: 34978399
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
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34978697
You mean darken the picture on mouse over?

Sid
0
 
LVL 2

Author Comment

by:team2005
ID: 34978756
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

0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34978827
Got it...

Few moments :)

Sid
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34978844
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
0
 
LVL 2

Author Comment

by:team2005
ID: 34978912
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

0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34978937
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
0
 
LVL 2

Author Comment

by:team2005
ID: 34978980
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

0
 
LVL 30

Accepted Solution

by:
SiddharthRout earned 500 total points
ID: 34978993
AFAIK and I could be wrong, but you cannot use HTML or any other such scripts inside Excel.

You may use VB Code to achieve a similar functionality as I have already shown you above.

Sid
0
 
LVL 2

Author Comment

by:team2005
ID: 34979005
Hi!

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


0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34979017
You cannot do that in Excel. That is what I am trying to tell you...

Sid
0
 
LVL 2

Author Comment

by:team2005
ID: 34979051
I know that, i want to make this in html
Included the code, but cant get this to work..
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34979067
In Html? What has Excel to do with this then?

Sid
0
 
LVL 2

Author Closing Comment

by:team2005
ID: 34979078
Thanks
0
 
LVL 2

Author Comment

by:team2005
ID: 34979085
Hi!

I wil move this to html channel now, you have answered to
me that this cant be done in excel. Ok
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34979091
Thanks for the points but I don't think I deserve it as your query is not solved yet?

Can you please answer my question in ID: 34979067?

Sid
      
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34979099
Where is the picture? In a userform in Excel? or a webpage?

Sid
0
 
LVL 2

Author Comment

by:team2005
ID: 34979137
Hi!

Html page is located on web
0
 
LVL 30

Expert Comment

by:SiddharthRout
ID: 34979148
Ok and what has excel to do with it?

Sid
0
 
LVL 2

Author Comment

by:team2005
ID: 34979165
Ok, please just forget this.

You dont anderstand...

Move this to html channel
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Freeze panes is an option within all variants of Excel to enable parts of a sheet to remain stationary when the cursor is in another part of the sheet. This is a very useful feature which is overlooked or under used.
Excel can be a tricky bit of software to get your head around. Whilst you’ll be able to eventually get to grips with the basic understanding of how to get by, there are a few Excel tips that not everybody will even know about let alone know how to d…
This Micro Tutorial demonstrates in Microsoft Excel how to consolidate your marketing data by creating an interactive charts using form controls. This creates cool drop-downs for viewers of your chart to choose from.
This Micro Tutorial will demonstrate how to create pivot charts out of a data set. I also added a drop-down menu which allows to choose from different categories in the data set and the chart will automatically update.

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question