Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

js get element by page name?

Status
Not open for further replies.
tanaquil

tanaquil

Programmer
Joined
Jun 10, 2009
Messages
5
Location
US
hey all - new member here - does anyone know a way to use the getElement to check the page name ?
i have an image map with rollover effect and want to keep the visibility if the page is the menu item clicked. does that make sense or do i need to be more detailed? any suggestions would be most appreciated - thanks!
tania
 
Sort by date Sort by votes
I think document.title is what you're looking for:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>This is a test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = function () {
   alert([!]document.title[/!]);
};

</script>
 
</head>
 
<body>
</body>
</html>

-kaht

 
Upvote 0 Downvote
thanks for the reply kaht - i can't use the title because these pages use a common title header - the attribute i think i want to use is:

var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

bc this id's the page - and then use it to keep the menu item highlighted. does this make sense?
thanks again!
tania
 
Upvote 0 Downvote
Sorry, I had no clue what you meant by page name - I just assumed it was the title.

Sounds like you got it working though.

-kaht

 
Upvote 0 Downvote
thanks - no, actually, that's what i'm trying still to do = by getting the page name, i use it like an id to control which menu item is highlighted. it's easy when the menu is a list, but this is an image map and i'm not sure how to link it this way - do you know what i mean? thanks much for the replies!
 
Upvote 0 Downvote
can you provide some code so we can get a better understanding of exacly what it is that you want to acheive?

--------
GOOGLE is a great resource to find answers to questions like "how do i..."

If you don't know exaclty what you want to do or what to search on, try Google Suggest: --------
I have recently been semi-converted to ensuring all my code (well most of it) works in both javascript and non-javasc
 
Upvote 0 Downvote
yeah, definitely - i'm using a script from oreilly to make an image map with rollover, only requiring two images for regular and over state - the javascript hides the over until the hotspot is accessed and then only shows through that piece of the image below:

function initMaps() {
if (document.getElementById) {
var mapIds = initMaps.arguments; // pass string IDs of containing map elements
var i, j, area, areas;
for (i = 0; i < mapIds.length; i++) {
areas = document.getElementById(mapIds).getElementsByTagName("area");

for (j = 0; j < areas.length; j++) { // loop thru area elements
area = areas[j];
area.onmousedown = imgSwap; // set event handlers
area.onmouseout = imgSwap;
area.onmouseover = imgSwap;
area.onmouseup = imgSwap;
}
}
}
}

// image swapping event handling
function imgSwap(evt) {
evt = (evt) ? evt : event; // equalize event models
var elem = (evt.target) ? evt.target : evt.srcElement;
var imgClass = elem.parentNode.name; // get map element name
var coords = elem.coords.split(","); // convert coords to clip
var clipVal = "rect(" + coords[1] + "px " +
coords[2] + "px " +
coords[3] + "px " +
coords[0] + "px)";
var imgStyle;

switch (evt.type) {
// case "mousedown" :
// imgStyle = document.getElementById(imgClass + "Down").style;
// imgStyle.clip = clipVal;
// imgStyle.visibility = "visible";
// break;
case "mouseout" :
document.getElementById(imgClass + "Over").style.visibility = "hidden";
// document.getElementById(imgClass + "Down").style.visibility = "hidden";
break;
case "mouseover" :
imgStyle = document.getElementById(imgClass + "Over").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";
break
// case "mouseup" :
// document.getElementById(imgClass + "Down").style.visibility = "hidden";
// guarantee click in IE
// if (elem.click) {
// elem.click();
// }
// break;
}
evt.cancelBubble = true;
return false;
}

then you refer to the area map and visibility this way:

<img src="images/menu.jpg" alt="header" name="header" width="800" height="115" style="position:absolute; top:80px; left:200px"
border="0" usemap="#header" id="headerUp"
visibility:visible" />
<map name="header" id="headerMap">
<area shape="rect" coords="282,12,439,29" href="#" />
<area shape="rect" coords="445,13,559,31" href="#" />
<area shape="rect" coords="576,12,635,29" href="#" />
<area shape="rect" coords="663,12,728,28" href="#" />
<area shape="rect" coords="744,13,790,29" href="#" />
<area shape="rect" coords="284,37,390,53" href="#" />
<area shape="rect" coords="398,36,535,54" href="#" />
<area shape="rect" coords="544,35,656,55" href="#" />
<area shape="rect" coords="659,35,730,55" href="#" />
<area shape="rect" coords="736,35,795,55" href="#" /></map>
<img id="headerOver" src="images/menuOver.jpg" width="800" height="115" border="0" style="position:absolute; top:80px; left:200px; visibility:hidden"

usemap="#header" />


what i want to do is keep the clipped visibility showing if you're on the page you selected - does this make more sense?
thank you!!
 
Upvote 0 Downvote
think you may be looking to grab it from DOCUMENT.LOCATION and then just grabbing the filename at the end of the URL.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Or
Code: 
location.href
will give you the page URL and you can parse it out however you want.

Lee
 
Upvote 0 Downvote
thanks so much for the replies, lee and greg - so how would i integrate it in to the javascript, do you think - use the mouseup event ? i tried adding to the mouse up event the following code, but now the rollover isn't working at all - any suggestion you might have would be great -thanks!
case "mouseup" :
document.getElementById(imgClass + "Down").style.visibility = "hidden";
guarantee click in IE
if (elem.click) {
elem.click();
}


imgStyle = document.getElementById(imgClass + "Up").style;
imgStyle.clip = clipVal;
imgStyle.visibility = "visible";

break;
}
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
jimoo
  • Locked
  • Question Question
How execute JS
Replies
3
Views
1K
xwb
xwb
penguinspeaks
  • Locked
  • Question Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb
penguinspeaks
  • Locked
  • Question Question
JS Open print dialog page to print a file
Replies
0
Views
489
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top