Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Basics
|
ASP.NET 2.0 Basics If you are new to ASP or ASP.NET programming with version 2.0, this is the forum to begin asking questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Basics section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old January 26th, 2009, 10:16 AM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default Asp with JavaScript - Mouseover

I never used javascript in asp before. Trying to use "mousover / mouseout" to alternate 2 different images in the same location. The objective is to show a logo on the page, then when user do mouseover show another log (in same location) with extended company information (like address etc). Can somebody help?


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>

<script type="text/javascript">
function mouseOver()
{
document.b1.src ="logo_1.gif"; ????????????????
}
function mouseOut()
{
document.b1.src ="Logo_2.gif"; ?????????????????
}
</script>


<form id="form1" runat="server">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/App_Data/logo_1.gif" Style="left: 487px;
position: relative; top: 72px" Width="83px" Height="109px" />&nbsp;
<asp:Image ID="Image2" runat="server" Height="130px" ImageUrl="~/App_Data/logo_2.gif"
Style="left: 228px; position: relative; top: 83px" Width="91px" /></div>
</form>
</body>
</html>

Last edited by snufse; January 26th, 2009 at 11:17 AM..
 
Old January 26th, 2009, 02:45 PM
Friend of Wrox
 
Join Date: Nov 2007
Posts: 207
Thanks: 2
Thanked 15 Times in 15 Posts
Default Try this...

don't put your images into your App_Data folder. create a new folder called images (or whatever you want)

then try:
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function mouseOver(obj) { obj.src ="Images/logo_2.gif"; } function mouseOut(obj) { obj.src ="Images/logo_1.gif"; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Image onmouseover="mouseOver(this);" onmouseout="mouseOut(this);" ID="Image1" runat="server" ImageUrl="~/Images/logo_1.gif" Style="left: 487px; position: relative; top: 72px" Width="83px" Height="109px" />&nbsp; <asp:Image onmouseover="mouseOver(this);" onmouseout="mouseOut(this);" ID="Image2" runat="server" Height="130px" ImageUrl="~/Images/logo_1.gif" Style="left: 228px; position: relative; top: 83px" Width="91px" /> </div> </form> </body> </html>
You need to tell the images to point to a new src when the mouse goes over the image and when the mouse goes off the image. Using "this" will send the object to the function so you don't have to look for it. then you just set the source to the specific image you want. So what i'm doing is defaulting both images to the logo_1.gif then onmouseover i'm telling it to change the image to logo_2.gif and then back to logo_1.gif when the mouse moves off.
__________________
Jason Hall

Follow me on Twitter @jhall2013
 
Old January 26th, 2009, 04:58 PM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Hi alliancejhall,

I tried using this code (while I was waiting for response to my post), I cannot get it to work?

Code:
 
<asp:Image ID="Image1" runat="server" ImageUrl="~/Icons/asp.net logo.png" AlternateText="" onmouseover="changeImage('Image1', '~/Icons/astec.jpg');" onmouseout="changeImage('Image1', '~/Icons/asp.net logo.png')" />
<script type="text/javascript">
<!--
function ChangeImage(imagename, imagesrc) {
document.getElementById(imagesrc).src = imagesrc;
} 
// -->
</script>
Also related to your post, I modified code to be like this I am using one image and switching the image source. It shows the correct image at load but at "mouseover" image disappears and shows no image.

Code:
 
<scriptlanguage="javascript"type="text/javascript">
function mouseOver(obj)
{
obj.src ="~/Icons/asp.net logo.png";
}
function mouseOut(obj)
{
obj.src ="~/Icons/astec.jpg";
}
 
</script>
<formid="form1"runat="server">
<div>
<asp:Imageonmouseover="mouseOver(this);"onmouseout="mouseOut(this);"ID="Image1"runat="server"ImageUrl="~/Icons/astec.jpg"Style="left: 487px;
position: relative; top: 72px"Width="83px"Height="109px"/>&nbsp;

Last edited by snufse; January 26th, 2009 at 05:15 PM..
 
Old January 26th, 2009, 05:05 PM
Friend of Wrox
 
Join Date: Nov 2007
Posts: 207
Thanks: 2
Thanked 15 Times in 15 Posts
Default Even Easier would be

this would be easier...

Code:
<asp:Image ID="Image1" runat="server" ImageUrl="~/Icons/asp.net logo.png" AlternateText=""
onmouseover="changeImage(this,'Icons/astec.jpg');" onmouseout="changeImage(this, 'Icons/aspnetlogo.png')" />
<script type="text/javascript">
<!--
function changeImage(imagename, imagesrc) {
imagename.src = imagesrc;
}
// -->
</script>
Using "this" will prevent you from having to get the element...

i changed your asp.net logo.png to aspnetlogo.png
don't add . to your file names it can cause issues.
__________________
Jason Hall

Follow me on Twitter @jhall2013
 
Old January 26th, 2009, 05:29 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default Okay, I give up...

Why couldn't you just do:
Code:
<asp:Image ID="Image1" runat="server" 
     ImageUrl="~/Icons/asp.net logo.png" 
     onmouseover="this.src='Icons/astec.jpg'" 
     onmouseout="this.src='Icons/asp netlogo.png'" 
/>
But, for that matter, WHY WHY WHY use an <asp:Image>
for something like this???

Why not simply
Code:
<img src="Icons/asp.net logo.png" 
     onmouseover="this.src='Icons/astec.jpg'" 
     onmouseout="this.src='Icons/asp netlogo.png'" 
/>
 
Old January 26th, 2009, 05:30 PM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Getting there. Image on load is OK, Image on "mouseover" is OK, does not show any image on "mouseout"?

PS: Yes, I could be doing things the hard way, but I need to start using js and this is a way for me to learn how to call functions. I've never done js before.

<scripttype="text/javascript">
<!--
function changeImage(imagename, imagesrc) {
imagename.src = imagesrc;
}
// -->
</script>
<
formid="form1"runat="server">
<
div>
<
asp:ImageID="Image1"runat="server"ImageUrl="~/Icons/asp.net logo.png"AlternateText=""
onmouseover="changeImage(this, 'Icons/astec.jpg');"onmouseout="changeImage(this, 'Icons/aspnetlogo.png')"/>

Last edited by snufse; January 26th, 2009 at 05:52 PM..
 
Old January 26th, 2009, 08:19 PM
Friend of Wrox
 
Join Date: Nov 2007
Posts: 207
Thanks: 2
Thanked 15 Times in 15 Posts
Default Look here...

I assume the mouse out image is the same as the image load image?

well they are written as two different ones?

you have:
ImageUrl="~/Icons/asp.net logo.png"
onmouseout="changeImage(this, 'Icons/aspnetlogo.png')"

I bet you should have:
ImageUrl="~/Icons/asp.net logo.png"
onmouseout="changeImage(this, 'Icons/asp.net logo.png')"
__________________
Jason Hall

Follow me on Twitter @jhall2013
 
Old January 26th, 2009, 08:31 PM
Friend of Wrox
 
Join Date: Mar 2007
Posts: 205
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Hi Jason,

My stupid mistake. That did the trick. Thank you for all your help and patience.





Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP:Repeater and Mouseover gbrown ASP.NET 1.0 and 1.1 Basics 1 June 4th, 2007 01:17 AM
Q: JButton with Mouseover and sound kifissia Java Basics 1 March 16th, 2007 06:38 AM
mouseover on label msrnivas ASP.NET 1.0 and 1.1 Basics 5 February 8th, 2007 10:27 AM
HTML Table and Mouseover itHighway Javascript How-To 4 January 30th, 2006 02:05 PM
oPacity Mouseover crmpicco Javascript How-To 3 July 1st, 2005 09:43 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.