Javascript: Popping up a <DIV> Layer above an image.

JavaScript and client side scripting.

Moderator: General Moderators

rehandalal
Forum Newbie
Posts: 10
Joined: Mon Sep 18, 2006 3:44 am
Location: Mumbai, India

Javascript: Popping up a <DIV> Layer above an image.

Post by rehandalal »

Hi,

I have an image placed somewhere around the bottom of my page, and i want to pop up a small menu above it when the mouse is rolled over... I have managed to get the function to show and hide the layer working, however I am unable to place the layer above the image... Any suggestions on how to do so?

Thanks!

Rehan
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

If memory serves, the property you are looking for is the image's offsetHeight and offsetWidth which would be it's top left corner position on the page. I seem to remember the property being named differently in various browsers however.
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

I Think You Can Do This Easily By This

Code: Select all

<img src="some_image.jpg" hight="15" width="15" xaxis="5" yaxis="5" onmouseover="pop_div(this.xaxis,this.xaxis)" onmouseout="hide_pop_div()">
xaxis refers To The X Axis where To Show The pop up Div
and yaxis refers To The Y Axis where To Show The pop up Div

Code: Select all

<div style="position: absolute; display:none; width: 252px; height: 136px; z-index: 1; left: 216px; top: 120px;" id="pop_div_id">
some menu
</div>

Code: Select all

function pop_div(x,y)
  {
     var hld_div = document.getElementById("pop_div_id");
     hld_div.style.left = x;
     hld_div.style.top = y;
     hld_div.style.display = "";
  }
function hide_pop_div(x,y) 
  { 
     var hld_div = document.getElementById("pop_div_id"); 
     hld_div.style.display = "none"; 
  }
==========================================================
And So The Full HTML of A Sample Page To Do This Job Will Look Like This
==========================================================

Code: Select all

<html>

<head>
<title>Your Page Title</title>
<script>
function pop_div(x,y) 
  { 
     var hld_div = document.getElementById("pop_div_id"); 
     hld_div.style.left = x; 
     hld_div.style.top = y; 
     hld_div.style.display = ""; 
  }
function hide_pop_div(x,y) 
  { 
     var hld_div = document.getElementById("pop_div_id"); 
     hld_div.style.display = "none"; 
  }
</script>
</head>

<body>

<div style="position: absolute; display:none; width: 252px; height: 136px; z-index: 1; left: 310px; top: 168px;" id="pop_div_id">
some menu
</div>

<p>
<img border="0" src="some_pic.gif" width="40" height="30" xaxis="50" yaxis="50" onmouseover="pop_div(this.xaxis,this.xaxis)" onmouseout="hide_pop_div()"></p>
</body>

</html>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

If you're going after valid (X)HTML, xaxis and yaxis will flag as errors.
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

[quote = "neel_basu"]And So The Full HTML of A Sample Page To Do This Job Will Look Like This[/quote]

I tested That Full Page That Worked very Well With No Erroor At All
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

neel_basu wrote:And So The Full HTML of A Sample Page To Do This Job Will Look Like This
I tested That Full Page That Worked very Well In Opera And IE With No Error At All
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Really? It passed validation?
Validator wrote: Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 1 column 0: no document type declaration; implying "<!DOCTYPE HTML SYSTEM>".

<html>

The checked page did not contain a document type ("DOCTYPE") declaration. The Validator has tried to validate with a fallback DTD, but this is quite likely to be incorrect and will generate a large number of incorrect error messages. It is highly recommended that you insert the proper DOCTYPE declaration in your document -- instructions for doing this are given above -- and it is necessary to have this declaration before the page can be declared to be valid.


2. Error Line 5 column 7: required attribute "TYPE" not specified.

<script>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


3. Error Line 28 column 64: there is no attribute "XAXIS".

...ic.gif" width="40" height="30" xaxis="50" yaxis="50" onmouseover="pop_div(thi

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.


4. Error Line 28 column 75: there is no attribute "YAXIS".

...th="40" height="30" xaxis="50" yaxis="50" onmouseover="pop_div(this.xaxis,thi


5. Error Line 28 column 152: required attribute "ALT" not specified.

...s.xaxis)" onmouseout="hide_pop_div()"></p>
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

If It Makes An Error Yet
xaxis And yaxis Are 2 attributes Only One Can Change It To Any Thing Whatever He/She Wishes

Code: Select all

<img src="some_image.jpg" hight="15" width="15" xaxisnew="5" yaxisnew="5" onmouseover="pop_div(this.xaxisnew,this.xaxisnew)" onmouseout="hide_pop_div()">
But I Think That Previous Code Should Not get Any Error
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

If You Declear The DOCTYPE Its Also Running Well

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

I Dont UnderStand.
If A Code Meets My needs And pops No Error Message On Any Browser Whats The Profit Of Validating It

What I Need To Get The Job Done.Common Visitors Of Any Site Will Never Validate the Sorce of The Pages of That Site.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

that's not a good way to do it anyway. he/she'd have to know the coodinates to put in the tag.

search this forum for 'event' and clientX and clientY.

you'll be able to piece together what you need. If not, let me know and I'll help you work something up.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

neel_basu wrote:I Dont UnderStand.
If A Code Meets My needs And pops No Error Message On Any Browser Whats The Profit Of Validating It

What I Need To Get The Job Done.Common Visitors Of Any Site Will Never Validate the Sorce of The Pages of That Site.
It has nothing to do with "common visitors." It has everything to do with the minority of users who must use other browsing technologies that perform a LOT better with valid pages than invalid ones. By not providing access to the minority you can easily fall into the target of a lawsuit in many locales. For example many countries in Europe require pages to be accessible to disabled persons at a similar level as they are to "normal" persons.

Invalid page code hinders browsers that follow the standards. Hindering the viewing of a site causes a bad user experience. Enough bad user experiences will land you in hot water, possibly with the government. I don't know about you, but I don't want to be named in a lawsuit involving any government on the other side of the table.
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

Ya What You Told Is Very Right Thing
Burrito wrote:that's not a good way to do it anyway. he/she'd have to know the coodinates to put in the tag.

search this forum for 'event' and clientX and clientY.

you'll be able to piece together what you need. If not, let me know and I'll help you work something up.
But Using clientX and clientY Doesn't Give One Complete fredom To Place The Menu Any Where.
As Its poping Over The Picture he May Need To Pop The Menu In Different Places Depending On The Size Or Shape Of That Image Thats Why
I Used An Extra Attribute To Place The Menu.
cause He Needs To pop The Menu In Such A Way that Any Picture wouldn't get Covered Compleately Or Partly By The Menu
After All He Have To Let His Visitors To View The Pictures
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

feyd wrote:It has everything to do with the minority of users who must use other browsing technologies that perform a LOT better with valid pages than invalid ones. By not providing access to the minority you can easily fall into the target of a lawsuit in many locales. For example many countries in Europe require pages to be accessible to disabled persons at a similar level as they are to "normal" persons.

Invalid page code hinders browsers that follow the standards. Hindering the viewing of a site causes a bad user experience. Enough bad user experiences will land you in hot water, possibly with the government. I don't know about you, but I don't want to be named in a lawsuit involving any government on the other side of the table.
Ya Thats A Matter To Think.
But I Didn't Under stand What You Meant By lawsuit
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Lawsuit; as in legal action that if you lose, and you most likely would, would require restitution to one or more parties. This may be a group of disabled persons, the government, it could be anyone. Restitution may be required in one or more forms, be they money, alterations, all manner of things. At the very least you would most likely be required to alter all the offending pages to conform to the applicable laws and they would likely have to pass whatever standardization panel that is appointed.

We're going quite a bit off topic here, so if you want to talk further about it, hit me up on PM or create a separate thread to talk about it (although we've had many threads on this overall subject previously.)
Post Reply