Mouse over effect

[Chrisjc]

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

<?php
$filein = 'help.html';
// ----------------------------------------
// Read help file into variable $help_text   
// ----------------------------------------
$help_text = ""; 
if ($fd = fopen ($filein, "r")) {
   $help_text = fread($fd, filesize ($filein));
   fclose ($fd);
}
if ($help_text == '')
   $help_text = 'No help text available';
$help_text=htmlentities($help_text);
$help_text=str_replace(array("\n", "\r"), array("",""), $help_text);
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>';
?>

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

[Frinavale]

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?

[Chrisjc]

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

[Frinavale]

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):

 ''' <summary>
    ''' This will retrieve a file that resides on the server and write it directly to the output stream.
    ''' The content returned by this aspx page will be the file that was retrieved from the server
    ''' and not regular HTML.
    ''' </summary>
    ''' <param name="sender">The Page that raised the event.</param>
    ''' <param name="e">The EventArgs for the Page Load event.</param>
    ''' <remarks></remarks>
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.ContentType = "image/jpg"
        Dim fs As FileStream = File.OpenRead(Server.MapPath("~/Images/DogObedienceTraining.jpg"))
        Dim b(fs.Length) As Byte
        For i = 0 To fs.Length - 1
            b(i) = fs.ReadByte
        Next
        fs.Close()
        Response.BinaryWrite(b)
    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:

<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?

[Chrisjc]

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

[Frinavale]

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.

[Chrisjc]

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.

[Frinavale]

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.

[Chrisjc]

@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

[Frinavale]

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.

[Chrisjc]

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

<Page x:Class="Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1">
    <Grid>
 
    </Grid>
</Page>
 

<Grid> ? </Grid>

[Frinavale]

The above is WPF stuff...
You should be using the Visual Studio Web Express...

[Frinavale]

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:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
 
    <script type="text/javascript">
        function AddMouseoverToImages(){
            var images = document.getElementsByTagName("img");
            var numImges = images.length;
            var i =0;
            for(i=0; i<numImges; i++){
                if(images[i].id != "bigImage")
                {
                    try{
                        images[i].addEventListener('mouseover',DisplayLargeImage,false);
                    }catch(ex){
                        images[i].attachEvent('onmouseover',DisplayLargeImage);
                    }
                }   
            } 
 
        }
        function DisplayLargeImage(event){
            var url;
           if(event.srcElement==null){
                url=this.src;
           }
           else{
                url=event.srcElement.src;
           }
           var pattern = "/[a-zA-Z0-9_.%20]*$";
           var regex = new RegExp(pattern);
 
           var imageName = regex.exec(url);
           var urlPattern = "/[a-zA-Z0-9_%20]*/[a-zA-Z0-9_.%20]*$";
           var urlRegex = new RegExp(urlPattern);
           var newurl = url.replace(urlRegex,imageName);
 
           var bigImage = document.getElementById("bigImage");
           bigImage.src = newurl;
 
        }
 
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
 
    <script type="text/javascript">
        window.onload=AddMouseoverToImages;
    </script>
 
    <div style="height: 400px; width: 400px; margin: 5px auto;">
        <img src="/Images/Cabo Smooth.jpg" id="bigImage" alt="large image" />
    </div>
    <div style="overflow-x:auto; overflow-y:hidden; overflow: auto; width:150px; height:auto;margin: 0px auto;">
        <table>
            <tr>
                <td>
                    <asp:Image ID="CaboSmooth" runat="server" ImageUrl="~/Images/Thumbs/Cabo Smooth.jpg" />
                </td>
                <td>
                    <asp:Image ID="CarbonSmooth" runat="server" ImageUrl="~/Images/Thumbs/Carbon Smooth.jpg" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</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.

[Chrisjc]

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?

[Chrisjc]

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.

[Frinavale]

:) I like it!

It looks good even without the scrolling stuff we were discussing.

[Chrisjc]

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. =]