Image Map Form Submit Button in CSS -
07-01-2004
, 12:25 AM
Challenge: To create a search field in a CSS layer, placed over a layer that
contains a complex header, including the "Go" button.
Background: I have a Fireworks generated header, including drop-down menus
and a search field, that appears to work properly, in multiple browsers
(http://www.actionamerica.org/huh/). However, when I bring the code for the
sliced header into DW and try to place it in a layer, the html that is in
two of those slices (the search field and "Go" button), hoses up the DW
image and makes it very difficult to design further, in DW. Interestingly,
the CSS page, with the header in a layer, still displays properly in the
several browsers that I have checked. The whole reason for this exercise is
to be able to place the header in a layer and have it display properly in DW
and in browsers.
My Solution (up to now): I removed the search field from the FW generated
header and took the html out of the "Go" button slice and re-generated the
header. That header displays properly in a DW layer and the menus work in
browsers. I use DW to place the search field html in a layer on top of the
header. This works in DW and browsers.
Problem: I want to create a circular hot spot, in a layer, over the "Go"
button (that is still a part of the header image) and have that hot spot
activate the submit action for the form.
Code: The following code seems to work, up to the point of the line with the
question marks (?????). There are also some additional input fields that are
immaterial to the problem.
----------
<div id="Layer2" style="position:absolute; left:606px; top:46px;
width:124px; height:30px; z-index:2">
<form method="get" action="http://search.atomz.com/search/">
<div align="center"><input size="14" name="sp-q" style="width:120px;"></div>
<input name="submit" type="image" value="Search" ... ????? ...>
<input ...>
<input ...>
</form></div>
----------
I have tried creating an image map named "submit" and tried "usemap" in the
"input" structure, but it seems that, somewhere, I am not coding it right.
Any ideas?
Thanks,
John Gaver
Action America
Microsoft: (n) Job security for IT consultants |