|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
|
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
Generate data entry and reporting .NET Web apps in minutes, straight from your database. Read our FREE whitepaper “Build Web 2.0 Applications Without Hand-Coding” Download now! |
|
#1
March 27th, 2008, 03:27 PM
|
|||
|
|||
|
HTML - Using Named Images in HTML
I have a page with rollover buttons for navigation.
I usually use straight HTML to do rollovers: Code:
<A HREF="http://www.ntsbdc.org/default.asp"><IMG ID="btnHome" SRC="images/btn_home_wht.jpg" BORDER="0" onMouseOver="this.src='images/btn_home.jpg'" onMouseOut="this.src='images/btn_home_wht.jpg'"></A> Instead, I'd like to name the button images in JS: Code:
if (document.images)
{
btnHomeWhite= new Image(53,23); btnHomeWhite.src="images/btn_home_wht.jpg"; btnHomeBlue= new Image(53,23); btnHomeBlue.src="images/btn_home.jpg";
btnAboutWhite= new Image(70,25); btnAboutWhite.src="images/btn_about_wht.jpg"; btnAboutBlue= new Image(70,25); btnAboutBlue.src="images/btn_about.jpg";
btnServicesWhite= new Image(90,25); btnServicesWhite.src="images/btn_services_wht.jpg"; btnServicesBlue= new Image(90,25); btnServicesBlue.src="images/btn_services.jpg";
btnLocalWhite= new Image(55,25); btnLocalWhite.src="images/btn_local_wht.jpg"; btnLocalBlue= new Image(55,25); btnLocalBlue.src="images/btn_local.jpg";
btnCalendarWhite= new Image(43,25); btnCalendarWhite.src="images/btn_calendar_wht.jpg"; btnCalendarBlue= new Image(43,25); btnCalendarBlue.src="images/btn_calendar.jpg";
btnSuccessWhite= new Image(105,25); btnSuccessWhite.src="images/btn_success_wht.jpg"; btnSuccessBlue= new Image(105,25); btnSuccessBlue.src="images/btn_success.jpg";
}
then use something like this: Code:
<A HREF="http://www.ntsbdc.org/default.asp"><IMG ID="btnHome" SRC=btnHomeWhite BORDER="0" onMouseOver="this.src=btnHomeBlue" onMouseOut="this.src=btnHomeWhite"></A> Of course, this syntax doesn't work - Does anyone know if this can be done? joe
|
|
#2
March 28th, 2008, 04:35 AM
|
||||
|
||||
|
most simple way that I can think of is:
Code:
<img id="btnHome" onload="this.src = btnHomeWhite.src;" border="0" onmouseover="this.src = btnHomeBlue.src;" onmouseout="this.src = btnHomeWhite.src;" /> not sure it will work but it's worth a shot.. also please use Fiddler or some other HTTP sniffer to make sure this does not send page request due to the blank image.. if it does you can create small dummy image then: Code:
<img src="pixel.gif" id="btnHome" onload="this.src = btnHomeWhite.src;" border="0" onmouseover="this.src = btnHomeBlue.src;" onmouseout="this.src = btnHomeWhite.src;" /> and pixel.gif will be one pixel image.
|
|
#3
April 1st, 2008, 10:45 AM
|
|||
|
|||
|
No good - I get a broken image icon. If I include the onload parameter and the "src='image.jpg'" both in the same line, I get a "stack overflow" error.
|
|
#4
April 1st, 2008, 10:47 AM
|
||||
|
||||
|
if you change this to:
Code:
onload="alert(btnHomeWhite.src);" what do you see in the alert?
|
|
#5
April 1st, 2008, 11:11 AM
|
|||
|
|||
|
I change the line to:
Code:
<A HREF="http://www.ntsbdc.org/default.asp"><IMG ID="btnHome" onload="alert(btnHomeWhite.src);" BORDER="0" onMouseOver="this.src = btnHomeBlue.src;" onMouseOut="this.src = btnHomeWhite.src;"/></A> the alert doesn't come up until I mouse over the button - then I get "http://localhost/sbdc/images/btn_home_wht.jpg" and I get the same alert when mousing out (no more stack overflow errors).
|
|
#6
April 1st, 2008, 11:16 AM
|
|||
|
|||
|
Also, if I use onload="alert(this.src);", it shows the correct image names on mouseover and mouseout - I guess the problem is getting the "onload" method to assign the image src correctly...
|
|
#7
April 1st, 2008, 11:24 AM
|
||||
|
||||
|
try adding src="pixel.gif" to both images and create image with such
name with minimal file size.
|
|
#8
April 1st, 2008, 11:38 AM
|
|||
|
|||
|
Now it looks like:
Code:
<A HREF="http://www.ntsbdc.org/default.asp"><IMG ID="btnHome" SRC="images/pixel.gif" onload="this.src = btnHomeWhite.src;" BORDER="0" onMouseOver="this.src = btnHomeBlue.src;" onMouseOut="this.src = btnHomeWhite.src;"/></A> and I get "stack overflow" when the page is loaded, on mouse over, and on mouse out - the correct button image is displayed at page load, but doesn't change on mouseover/mouseout.
|
|
#9
April 1st, 2008, 11:45 AM
|
||||
|
||||
|
sorry, my bad - should have seen this coming.
 change this to: Code:
onload="if (!this.getAttribute('loaded')) {this.setAttribute('loaded', '1'); this.src = btnHomeWhite.src;}"
let me know how it goes! 
|
|
#10
April 1st, 2008, 12:22 PM
|
|||
|
|||
|
That worked great - Thanks!
joe
|
|
#11
April 2nd, 2008, 02:41 AM
|
||||
|
||||
|
Quote:
|
|
#12
May 9th, 2008, 10:25 AM
|
|||
|
|||
|
Not sure if I can still use this thread, but here goes:
I incorporated the above changes, and it has worked great since then. However, when I run the page through the w3c markup validator (using HTML 4.01 transitional doctype), it won't allow an onload attribute on an image. Is there a way around this? joe
|
|
#13
May 9th, 2008, 12:32 PM
|
||||
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
