• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to display text over an image in IE

 
Rancher
Posts: 5008
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 9707
43
Android Google Web Toolkit Hibernate IntelliJ IDE Spring Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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??
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Rancher
Posts: 5008
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
In the future click the "Disable HTML in this message" checkbox when it screws up your html

Eric
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Rancher
Posts: 5008
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Rancher
Posts: 5008
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Rancher
Posts: 5008
38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.>
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
reply
    Bookmark Topic Watch Topic
  • New Topic