467,888 Members | 1,571 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,888 developers. It's quick & easy.

Mouse over effect

Chrisjc
256MB
Good afternoon,

I am seeking some help with a mouse over effect on an image... I have images that are 100x100 I would like to be able to mouse over them and it pull up a window showing that image in a larger format 400x400

I wanted to use this code here

Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $filein = 'help.html';
  3. // ----------------------------------------
  4. // Read help file into variable $help_text   
  5. // ----------------------------------------
  6. $help_text = ""; 
  7. if ($fd = fopen ($filein, "r")) {
  8.    $help_text = fread($fd, filesize ($filein));
  9.    fclose ($fd);
  10. }
  11. if ($help_text == '')
  12.    $help_text = 'No help text available';
  13. $help_text=htmlentities($help_text);
  14. $help_text=str_replace(array("\n", "\r"), array("",""), $help_text);
  15. echo '<a align="right" href="#" onmouseout="javascript:hideTooltip()" onmouseover="javascript:showTooltip(event,\''.$help_text.'\');return false"><img src="http://test.valoriprecast.com/images/ProductImages/Colors/thumbs/Blanco Smooth.jpg" border="0"></a>';
  16. ?>
As you can see it is JavaScript and PHP. However the site I am working with is .aspx ASP.NET 2.0 via IIS.

I had asked if I could get the PHP to be read with in the .aspx extension and I got replies along the lines of why use three different codes? Thinking about it now that makes sense but the reason I was trying to do that is because I know how to use PHP...

Is there anyway anyone could tell me how to do a mouse over effect in ASP? Or maybe how I could enable PHP to be read?

Thank you,

Chris
Mar 26 '09 #1
  • viewed: 3403
Share:
16 Replies
Frinavale
Expert Mod 8TB
You'd still use JavaScript for the to display the larger image during the "onmouseover" event of the image.

You could do one of two things at that point.
You could show an already preloaded image (that is hiding on the page).
Or, you could make a call to an ASPX page that simply returns an image.

Which version are you thinking about using?
Mar 26 '09 #2
Chrisjc
256MB
Okay to that message you sent me.

As to your answer hmmm which is a better method to use... I do not think having up to 20 plus pictures hiding on the page is a good idea the load time would be to long...

So I would have to say calling on another page is a good idea.

Thank you,

Chris
Mar 26 '09 #3
Frinavale
Expert Mod 8TB
Ok, there's this neat technique that is commonly used for displaying thumbnails or dynamic images retrieved from a database... it can actually be used for things other than images but maybe I should explain it first.

You create a new ASPX page in your project, but this page will not return HTML when called by the browser. Instead it will return the image.

In the PageLoad event for this ASPX page you would change the content type that the page returns by setting the Response.ContentType property. You'd load the image, and write the image directly to the Response.Output stream

For example (I'm not sure if you're doing VB or C#...but this is VB code):
Expand|Select|Wrap|Line Numbers
  1.  ''' <summary>
  2.     ''' This will retrieve a file that resides on the server and write it directly to the output stream.
  3.     ''' The content returned by this aspx page will be the file that was retrieved from the server
  4.     ''' and not regular HTML.
  5.     ''' </summary>
  6.     ''' <param name="sender">The Page that raised the event.</param>
  7.     ''' <param name="e">The EventArgs for the Page Load event.</param>
  8.     ''' <remarks></remarks>
  9.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  10.         Response.ContentType = "image/jpg"
  11.         Dim fs As FileStream = File.OpenRead(Server.MapPath("~/Images/DogObedienceTraining.jpg"))
  12.         Dim b(fs.Length) As Byte
  13.         For i = 0 To fs.Length - 1
  14.             b(i) = fs.ReadByte
  15.         Next
  16.         fs.Close()
  17.         Response.BinaryWrite(b)
  18.     End Sub

The above example will grab a specific image from the server and return it to the browser....for this to work you'd have to specify the URL of the ASPX page as the source for the image tag.

For example, say the ASPX page with the above code was named ImageGrabber.aspx. In the page where you want to display the image you would set the Image URL property of an ASP.NET Image control to the URL of the ImageGrabber.aspx page:
Expand|Select|Wrap|Line Numbers
  1. <asp:Image ID="CardHolderImage" runat="server" ImageUrl="~/ImageGrabber.aspx" />

The nice thing about this is you can supply an ID for the Image to display in the URL. The ImageGrabber.aspx page can use this ID to dynamically grab the image that you want to display.

With me so far?
Mar 26 '09 #4
Chrisjc
256MB
I understand to a fine point... My issue here is that I am not using VB or anything for that matter let me show you...

http://test.valoriprecast.com/pg--138--Colors.aspx

There is a backdoor admin page where I can create that pg--138--Corlos.aspx

Then there is a simple frontpage2003 type plug in that I can edit and add stuff into it... Now I can go to the source of the page in that plug in and add custom coding... So I am not actually coding anything in aspx the site is already set up from another company but it is a CMS they made using some shopping cart... I am just making a new site out of the existing code... Iíve changed the CSS to make the custom theme and I am just adding content... I just wanted to get fancy with this page here you can see what I have going on id like to get the image hover thing here as you can see why.

So I kind of follow you but at the same time I am not 100% sure.

We paid the company that did the main working components of the site for another license to use it... I am just populating it now for a new business that we are opening.

Hope that helps see where I am at with this whole thing... So I do not have a VB editor or anything like that.. I been using FrontPage to edit source than copying and pasting it into the plug-in via that page...

Here is a screen shot of the back end of admin side...

http://test.valoriprecast.com/Downloads/mo.jpg
Mar 26 '09 #5
Frinavale
Expert Mod 8TB
This is going to be very hard to work with.
I would look into downloading Visual Studio Express. There are 4 free versions of Visual Studio available, one of them is for web development. I've never used it before but I have a feeling that working in Visual Studio will be a lot easier than using what you currently have.

Once you have your controls working on your development machine, then start looking at uploading them to the server and modifying the existing code to use it.
Mar 30 '09 #6
Chrisjc
256MB
Please explain your last part, Are you saying once it is install to let you know? I downloaded and installed it... I am not sure what you mean by uploading and modifying existing code... not sure where I would look.
Mar 30 '09 #7
Frinavale
Expert Mod 8TB
Now that you've installed Visual Studio it will be easier to create the feature for the mouse over effect. You can also create a test application using Visual Studio that will help you debug the feature before moving it to the server.

Once you're satisfied with this feature you'll move it to the server. At this point you're going to have to modify the existing aspx so that they can use your new feature.
Mar 30 '09 #8
Chrisjc
256MB
@Frinavale
Where do I start? Like what am I looking for... do I just use that code you provided above... Do I have to do anything in the web.config not sure what file I am opening with VS
Mar 30 '09 #9
Frinavale
Expert Mod 8TB
You don't have to do anything with the web.config.

Open a new project....use the Default.aspx page for testing.
Add a new aspx to the project and place the above code in it.
Mar 30 '09 #10
Chrisjc
256MB
Hmm this doesnt seem easy at all.... I am a little lost in the VB Express... Do I place the code you gave me above in between

Expand|Select|Wrap|Line Numbers
  1. <Page x:Class="Page1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="Page1">
  5.     <Grid>
  6.  
  7.     </Grid>
  8. </Page>
  9.  
<Grid> ? </Grid>
Mar 30 '09 #11
Frinavale
Expert Mod 8TB
The above is WPF stuff...
You should be using the Visual Studio Web Express...
Mar 30 '09 #12
Frinavale
Expert Mod 8TB
I think I've found a solution to your problem that doesn't actually use ASP.NET at all.

It's purely JavaScript based.

Take the following code and copy it over your Default.aspx code:

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title>Untitled Page</title>
  4.  
  5.     <script type="text/javascript">
  6.         function AddMouseoverToImages(){
  7.             var images = document.getElementsByTagName("img");
  8.             var numImges = images.length;
  9.             var i =0;
  10.             for(i=0; i<numImges; i++){
  11.                 if(images[i].id != "bigImage")
  12.                 {
  13.                     try{
  14.                         images[i].addEventListener('mouseover',DisplayLargeImage,false);
  15.                     }catch(ex){
  16.                         images[i].attachEvent('onmouseover',DisplayLargeImage);
  17.                     }
  18.                 }   
  19.             } 
  20.  
  21.         }
  22.         function DisplayLargeImage(event){
  23.             var url;
  24.            if(event.srcElement==null){
  25.                 url=this.src;
  26.            }
  27.            else{
  28.                 url=event.srcElement.src;
  29.            }
  30.            var pattern = "/[a-zA-Z0-9_.%20]*$";
  31.            var regex = new RegExp(pattern);
  32.  
  33.            var imageName = regex.exec(url);
  34.            var urlPattern = "/[a-zA-Z0-9_%20]*/[a-zA-Z0-9_.%20]*$";
  35.            var urlRegex = new RegExp(urlPattern);
  36.            var newurl = url.replace(urlRegex,imageName);
  37.  
  38.            var bigImage = document.getElementById("bigImage");
  39.            bigImage.src = newurl;
  40.  
  41.         }
  42.  
  43.     </script>
  44.  
  45. </head>
  46. <body>
  47.     <form id="form1" runat="server">
  48.  
  49.     <script type="text/javascript">
  50.         window.onload=AddMouseoverToImages;
  51.     </script>
  52.  
  53.     <div style="height: 400px; width: 400px; margin: 5px auto;">
  54.         <img src="/Images/Cabo Smooth.jpg" id="bigImage" alt="large image" />
  55.     </div>
  56.     <div style="overflow-x:auto; overflow-y:hidden; overflow: auto; width:150px; height:auto;margin: 0px auto;">
  57.         <table>
  58.             <tr>
  59.                 <td>
  60.                     <asp:Image ID="CaboSmooth" runat="server" ImageUrl="~/Images/Thumbs/Cabo Smooth.jpg" />
  61.                 </td>
  62.                 <td>
  63.                     <asp:Image ID="CarbonSmooth" runat="server" ImageUrl="~/Images/Thumbs/Carbon Smooth.jpg" />
  64.                 </td>
  65.             </tr>
  66.         </table>
  67.     </div>
  68.     </form>
  69. </body>
  70. </html>
Make sure that you have a Thumbs folder in your Images folder.
Make sure that the thumbnails "Carbon Smooth.jpg" and "Cabo Smooth.jpg" images are in the Thumbs folder....likewise, make sure that the large versions of these are in the Images folder.
Mar 31 '09 #13
Chrisjc
256MB
After changing the paths for where my images are on the server, I tested it out in VB Web Express and it works just fine... Before adding in any other images I wanted to load it up live on the site and try it out.

Sadly it doesnt seem to be reading the asp part... Not sure why it would do that... but I copied the source as is and placed it in the colors.aspx page...

http://test.valoriprecast.com/pg--138--Colors.aspx

That is all it pulls.... any thoughts?
Apr 1 '09 #14
Chrisjc
256MB
Scratch that.... Instead of using asp to call on the images I switched it to just normal html... Works grate!!! thank you for that. Take a look at that link I am trying some tables to make it look slick.
Apr 1 '09 #15
Frinavale
Expert Mod 8TB
:) I like it!

It looks good even without the scrolling stuff we were discussing.
Apr 1 '09 #16
Chrisjc
256MB
Sure does, I am just trying to tweak it some to look right... than I have to make some little paragraph to explain how it works haha

But thank you for all your time and help I really appreciate that! I know when I said I do AD stuff, you made the comment I might be able to help you.

Just let me know and I will do my best to help you out with whatever the issue may be, I know AD can be a pain if something goes wrong between sites and other things, for the most part it is really slick when it is running smoothly. =]
Apr 1 '09 #17

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Anders Eriksson | last post: by
reply views Thread by StriderBob | last post: by
4 posts views Thread by ML | last post: by
1 post views Thread by yerk5 | last post: by
19 posts views Thread by wmanzo | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.