Newbie question

B

Bob

I have an 5 jpg image map in the top of the left hand frame and when I move
the mouse over this I need to be able to display a list of items underneath
the image I just rolled over, these list of items then go and access a
database in the right hand frame. So far I just having these lists appearing
in the html I am able to link to the right hand frame no problem (in which a
php scipt then accessed and displays the results in the right hand frame
using "target" and using the "?" operator to pass info to the PHP script,
then use GET in php.

My understanding of javascript is not sufficient to allow me to be able to
do the left hand frame processing. i have divided the links into the
necessary categories ie frozenfoods, petfood, homehealth,freshfood and
beverages and put these into separate html pages. I hope to beable to
display when using
<html>

<head>
</head>

<body>
<mapname="grocery">
<img src="shopping.bmp" border="0"
<map id="shopping">
<area shape="rect" coords="0,0,89,97"href="beverages.html" ONMOUSEOVER=

I imagine the code should go here (for each of the below as well)for the
ONMOUSEOVER= processing to display the linked html but I alas am pulling my
hair out.

<area shape="rect" coords="112,0,203,97"href="fresh.html">
<area shape="rect" coords="220,0,323,97"href="frozen.html">
<area shape="rect" coords="345,0,418,97"href="homehealth.html">
<area shape="rect" coords="435,0,534,97"href="petfood.html">


</body>
</html>

I have php and html books but none of these are sufficient to help me with
the left hand frame javascript processing.

i would be very grateful for any help in this regard.
 
R

Ron

Bob said:
I have an 5 jpg image map in the top of the left hand frame and when I move
the mouse over this I need to be able to display a list of items underneath
the image I just rolled over, these list of items then go and access a
database in the right hand frame. So far I just having these lists appearing
in the html I am able to link to the right hand frame no problem (in which a
php scipt then accessed and displays the results in the right hand frame
using "target" and using the "?" operator to pass info to the PHP script,
then use GET in php.

My understanding of javascript is not sufficient to allow me to be able to
do the left hand frame processing. i have divided the links into the
necessary categories ie frozenfoods, petfood, homehealth,freshfood and
beverages and put these into separate html pages. I hope to beable to
display when using
Click to expand...
Heya Bob,
I edited the page to add scripting functionality. Basically, you declare
functions inside a script element (or link to a script in a file), and
then call
them from intrinsic events like onmouseover attached to elements. Note
that the HTML specification has moved forward a little from the writing
of your book. All pages now require a document type node and should be
written to conform to XML application standards so that the tools of XML
can be used natively in conjunction with HTML:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<!--Newer browsers recognize this MIME type and render xhtml more efficiently, due to its strict markup-->

<meta http-equiv="Content-Type" content="application/xhtml+xml" />

<!--The script type used for events must be declared in the head using Content-Script-Type-->

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<!--Titles are required for rendering-->

<title>Untitled</title>
<script type="text/javascript">
function showList(listName) {
var listDisplay = document.getElementById("listDisplay");
listDisplay.data = listName + ".html";

if(document.implementation.hasFeature("CSS", "2.0")) {
var listArea = document.getElementById(listName);
var listAreaLeft = document.defaultView.getComputedStyle(listArea, null).getPropertyValue("left");
var listAreaTop = document.defaultView.getComputedStyle(listArea, null).getPropertyValue("top");
document.getOverrideStyle(listDisplay, null).setProperty("left", listAreaLeft, "important");
document.getOverrideStyle(listDisplay, null).setProperty("top", listAreaTop, "important");
document.getOverrideStyle(listDisplay, null).setProperty("visibility", "visible", "important");
}
else {
alert("Your browser doesn't support dynamic CSS. You will now be taken to an alternate menu.");
window.location.href="shoppinglinks.xhtml";
}
}

function hideList() {
var listDisplay = document.getElementById("listDisplay");
document.getOverrideStyle(listDisplay, null).setProperty("visibility", "hidden", "important");
}
</script>
<style type="text/css">
img {
border-style:none;
}

#listDisplay {
position:absolute;
visibility:hidden;
}
</style>

</head>
<body>

<!--All elements must be closed with an end tag. Empty elements can use the shorthand "/>" closing property-->
<!--The border attribute for images is deprecated in favor of stylesheets. The alt attribute is required.
In the event that the image is an image map, authors are encouraged to use longdesc to link to a list
of links that the map represents for non-visual browsers. Images are associated with maps using the id
and usemap attributes.-->

<img src="shopping.bmp" alt="Shopping lists" longdesc="shoppinglinks.xhtml" usemap="shopping" onmouseout="hideList()" />
<map id="shopping">

<!--Areas require the alt attribute to accommodate non-visual browsers. I've given them ids so that
the javascript can grab their positions.-->

<area shape="rect" coords="0,0,89,97" href="beverages.html" id="beverages" alt="Beverages List" onmouseover="showList('beverages')" />
<area shape="rect" coords="112,0,203,97" href="fresh.html" id="fresh" alt="Fresh foods list" onmouseover="showList('fresh')" />
<area shape="rect" coords="220,0,323,97" href="frozen.html" id="frozen" alt="Frozen foods list" onmouseover="showList('frozen')" />
<area shape="rect" coords="345,0,418,97" href="homehealth.html" id="homehealth" alt="Home and Health" onmouseover="showList('homehealth')" />
<area shape="rect" coords="435,0,534,97" href="petfood.html" id="petfood" alt="Pet food" onmouseover="showList('petfood')" />
</map>

<!--We'll use a hidden floating object to display your pages. The object will disappear if the user's
cursor exits the image.-->

<object id="listDisplay" data="beverages.html" type="text/html" height="300" width="100" standby="Loading list...">
<!--The content of an object is displayed iff the object's data cannot be rendered-->
Your browser doesn't support embedded HTML files. <a href="shoppinglinks.xhtml">Click here</a>
to see the lists.
</object>
</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

SVG not full width and space 0
Coding problem 13
need help on image map 2
Processing in Python help 0
image map, javascript 9
Working on mobile css menu with plenty of frustration! 2
Window.Open get new tab instead of new window in FireFox 1
need help on highlighting image map area 1

Members online

Total: 61 (members: 1, guests: 60)
Robots: 86

Forum statistics

Threads
473,813
Messages
2,569,699
Members
45,489
Latest member
SwethaJ

Latest Threads

Top