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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS inside JS issue - I think

Status
Not open for further replies.
xTiltx

xTiltx

Technical User
Aug 22, 2007
2
US
My code is below. The menu image (menu.gif) is mapped so that different buttons (all within the one gif) display different text in the main area/window. I am trying to do three things that I am stuck on;

I'm trying to insert an anchor and/or an image tag between <span> tags does, but it will not work, and I don't know how to accomplish that.
Also, the page displays in Firefox, but the JavaScript doesn't seem to work, and I can't figure that out either.

This is my first page in several years, and I know browsers have changed a good bit since the last time I tried to build one, but please go easy on me - I'm trying.


Three issues:
1. Insert an image file where the "*****" is
2. Insert an anchor tag/link where the "*****" is
3. Make this whole page work in Firefox.

If anyone could help, I would greatly appreciate it.
I condensed the code as best I could:

<html>
<head>


<script language=JavaScript>
<!--

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false


function layerWrite(id,nestref,text) {
if (ns4) {
var MyLayr =
(nestref)? eval('document.'+nestref+
'.document.'+id+'.document')
: document.layers[id].document
MyLayr.open()
MyLayr.write(text)
MyLayr.close()
}
else if (ie4) document.all[id].innerHTML = text
}

//-->
</script>



<style type="text/css">

.areamap {
background-image: url(clouds.gif);
left: 0px;
top: 0px;

}

#genDiv {
background-color: #FFFFFF;
height: 30px;
left: 0px;
position: relative;
top: 0px;
layer-background-color: #004080
}

</style>
</head>




<body>

<img src="menu.gif" usemap="#menu">
<map name="menu">
<area shape="rect" coords="0,60,96,87" href="javascript:layerWrite('genDiv',null,'<span%20class=\'areamap\'>*****</span>')"

title="">
<area shape="default" nohref>
</map>

</body>
</html>
 
Sort by date Sort by votes
As you say, browsers have moved a long way since all that cross-browser checking code was necessary. This should do something close to what you need:

Code: 
<html>
<head>
	<script type="text/javascript">
		function layerWrite(id, text) {
			document.getElementById(id).innerHTML = text;
		}
	</script>

	<style type="text/css">
		.areamap {
			background-image: url(clouds.gif);
		}

		#genDiv {
			background-color: #FFFFFF;
			height: 30px;
			position: relative;
			left: 0px;
			top: 0px;
		}
	</style>
</head>

<body>
	<img src="menu.gif" usemap="#menu">
	<map name="menu">
		<area shape="rect" coords="0,60,96,87" href="javascript:layerWrite('genDiv', '<span class=\'areamap\'><a href=\'whatever\'><img src=\'whatever\' width=\'xxx\' height=\'yyy\'></a></span>');" title="">
	</map>
</body>
</html>

Putting an image and anchor inside the span should be as easy as simply inserting the relevant markup.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
First, thank you.

This was the fix I needed for the first two problems. I was close, but I just couldn't get the right syntax to do it.

But I still am having issues with Firefox. Perhaps a better explanation and a little more code might shed some better light on what I am trying to accomplish:

This code is for a page that has a single gif menu image on the left of the screen. The image is mapped and when I click on an area of the image, the main area of the page displays a paragraph or two.
Clicking on another area of the mapped menu gif changes the text in the main area of the page to a different paragraph or two.

When I tried your suggestion, each click only rendered the word "null" in my text area in IE, and nothing in Firefox. I can't remember now why I even have null in my code, but I see why it is displaying. Do I even need it?

I've seen this display technique on other pages with much, much more code, which didn't seem like it was necessary to me, but maybe I'm asking too much. Then again, it does work in IE, so I think I am close. If you have any more suggestions, I could use them.

I know I am outdated, as is my coding, and I'm glad to hear you say that I no longer need to write code for two different browsers all the time. That was such a pain.

The <body> of the page has the one menu gif which is divided into six mapped buttons. I tried to condense my code above, but perhaps I condensed too much.
Here are two of the mapped buttons. When clicked, one button should display text in my main area. When another is clicked, other text should be displayed.



Code: 
<img src="images/menu.gif" usemap="#menu" border="0">
<map name="menu">

<area shape="rect" coords="0,60,96,87" href="javascript:layerWrite('blueDiv',null,'<span%20class=\'areamap\'>
One block of text here</span>')" title="">

<area shape="rect" coords="0,88,96,116" href="javascript:layerWrite('blueDiv',null,'<span%20class=\'white\'><br />Another block of text</span>')" title="">

<area shape="default" nohref>
</map>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
679
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
869
xwb
xwb
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
599
JScannell
JScannell
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
817
xwb
xwb
penguinspeaks
  • Locked
  • Question
JS Open print dialog page to print a file
Replies
0
Views
232
penguinspeaks
penguinspeaks

Part and Inventory Search

Sponsor

Back
Top