Granny's Programming Pearls
"inside of every large program is a small program struggling to get out"
JavaRanch.com/granny.jsp
The moose likes HTML, CSS and JavaScript and the fly likes How to display text over an image in IE Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to display text over an image in IE" Watch "How to display text over an image in IE" New topic
Author

How to display text over an image in IE

Norm Radder
Ranch Hand

Joined: Aug 10, 2005
Posts: 685
Hi,
I'm trying to create an HTML page that displays an image and will display a small text at the location the mouse is clicked. I've gotten it to work with Firefox but am unable to get it to work with IE.

After I determine the text I want to display (its in NamesList[]) at the clicked location I use the following Javascript code:

Definitions from other parts of code:


Works in Firefox, but not in IE.
Is there code that will work in both browsers?
Is there code that will work in IE that I can chose if in IE?

Thanks,
Norm
Ankit Garg
Sheriff

Joined: Aug 03, 2008
Posts: 9280
    
  17

Works in Firefox, but not in IE

What actually happens in IE (and in which version of IE)?? Do you get an error or the div is placed at the wrong place??


SCJP 6 | SCWCD 5 | Javaranch SCJP FAQ | SCWCD Links
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
You are not showing how in the world you are getting the mouse position which seems to be the part that has the error.

Eric
Norm Radder
Ranch Hand

Joined: Aug 10, 2005
Posts: 685
Thanks for the replys. IE puts the text in a new area above the image and the text is black vs cyan.

Here is the full code. The NamesList array contains: x, y, Name


The site editor removes: SRC="1990_Reunion-300_ED1.jpg" HEIGHT="96%" ALT="1990 Reunion" from the IMG tag
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
In the future click the "Disable HTML in this message" checkbox when it screws up your html

Eric
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Looking at your code I noticed TRUE andFALSE being declared.

Do you know JavaScript by default has true and false? All you are doing is reinventing the wheel there.

Looking at your code, it shows why using a library such as jQuery would help. There is no real need for browser sniffing.

Have you thought about using a classic image map? What does NamesList look like?

Eric


Norm Radder
Ranch Hand

Joined: Aug 10, 2005
Posts: 685
Thanks for the reply.
Appreciate all comments, however the main problem is not solved yet: Why does code work in FF and not in IE?
What needs to be changed to make it work?

My experience with IMAGEMAP was that they were hard to set up. Do they give the same effect as my code working in FF?

Here is layout of NamesList.js:


Thanks,

Norm Radder
Ranch Hand

Joined: Aug 10, 2005
Posts: 685
I downloaded the jQuery-ui-1.7.2 and tried the index.html file that was in the .zip file and see that the developers of that package also have trouble with IE. The text in the box in the "Overlay and Shadow Classes (not currently used in UI widgets)" section extends past the end of the background colored area when viewed in IE at certain window sizes. A little sloppy looking. I'm using IE7


When will there be ONE standard for Javascript?
Norm Radder
Ranch Hand

Joined: Aug 10, 2005
Posts: 685
I found a way to let my code work in IE. Define the <DIVs to be moved before the page finishes loading. Then I can move them over an image in IE and FF. If I define them after the page has loaded, IE doesn't move them over the image.>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60053
    
  65

Norm Radder wrote:When will there be ONE standard for Javascript?

It doesn't really have much to do with JavaScript, but with the DOM provided by the browsers.

You can write to Steve Ballmer, but I don't think it would do much good.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to display text over an image in IE
 
Similar Threads
How to eliminate the diffrence between firefox and ie about this problem
using frameset
my overlay box works in Firefox, but fails in IE8
Help deleteing a node at an onload event
Creating CSS class at runtime