Input Form on Top of Image Map Help |
Input Form on Top of Image Map Help |
rotcodam |
May 12 2023, 02:18 PM
Post
#1
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
I want to add a simple search form on TOP of an image map, I am not sure how to accomplish this. Any help appreciated.
Form: CODE <form method="get" action="http://www.google.com/search"> <input type="text" name="q" size="50" maxlength="255" value="" autofocus/> <input type="submit" value="Google Search" /> </form> Image Map: CODE <img src="Homepage_Mini.jpg" alt="" width="1920" height="1080" usemap="#Map"/> <map name="Map"> <area shape="rect" coords="230,252,266,283" href="https://finance.yahoo.com/;_ylt=Arh7CkzH_.Hj7vEoDK4Tva1vNu8C/?bypass=true"> <area shape="rect" coords="299,251,360,285" href="http://www.ebay.com/"> <area shape="rect" coords="393,239,489,282" href="http://www.smokingmeatforums.com/forum/newposts"> <area shape="circle" coords="540,267,19" href="http://forecast.weather.gov/MapClick.php?site=byz&textField1=45.7914&textField2=-108.5385&smap=1"> <area shape="rect" coords="950,255,983,288" href="https://www.google.com/maps"> <area shape="rect" coords="1008,256,1049,288" href="https://mail.google.com/mail/?tab=mm&authuser=0"> <area shape="circle" coords="754,266,21" href="http://seattle.mariners.mlb.com/index.jsp?c_id=sea"> <area shape="rect" coords="493,147,786,228" href="https://www.google.com/"> <area shape="circle" coords="833,269,22" href="https://photos.google.com/search/_tra_?referrer=GPU"> <area shape="rect" coords="882,251,923,286" href="https://feedly.com/i/latest"> <area shape="rect" coords="594,256,694,278" href="http://mlb.mlb.com/home"> </map> Example of what I am trying to accomplish: |
Christian J |
May 12 2023, 04:17 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
I want to add a simple search form on TOP of an image map You mean the image map is made up of the entire image (including the blue stars)? And you want the search field in front of it (that is, between the viewer and the image map)? Maybe that possible with CSS positioning But why use an image map in the first place? It seems simpler to let the blue stars be a CSS background image, and let the various icons be separate links and IMG elements. |
pandy |
May 12 2023, 04:34 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
What he said.
|
coothead |
May 12 2023, 04:40 PM
Post
#4
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there rotcodam,
coothead |
rotcodam |
May 12 2023, 04:46 PM
Post
#5
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
It seems simpler to let the blue stars be a CSS background image, and let the various icons be separate links and IMG elements. Thanks for your reply. Is there a how-to or CSS 101 that I could learn that? Maybe a YT site? Can Dream Weaver do that with a WYSIWYG?... I have an old version of Dream Weaver CS6... I currently am using Coffee Cup HTML editor. Thanks |
coothead |
May 12 2023, 05:02 PM
Post
#6
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there rotcodam,
coothead |
rotcodam |
May 12 2023, 05:42 PM
Post
#7
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
|
coothead |
May 12 2023, 07:31 PM
Post
#8
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there rotcodam,
coothead |
rotcodam |
May 12 2023, 08:09 PM
Post
#9
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
It wouldn't let me attach the .zip, it said the file was over the global limit (only 360kb) not sure what the issue is.
See if you can get the images here: https://postimg.cc/gallery/VsBn2tB Thanks |
Christian J |
May 13 2023, 06:21 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Is there a how-to or CSS 101 that I could learn that? The CSS reference here is a bit old, but most of it still applies: https://htmlhelp.com/reference/css/ This one should be more updated (though I haven't read it myself): https://developer.mozilla.org/en-US/docs/Learn/CSS Here's the CSS "background-image" property: https://htmlhelp.com/reference/css/color-ba...ound-image.html https://developer.mozilla.org/en-US/docs/We...ackground-image QUOTE Can Dream Weaver do that with a WYSIWYG?... I have an old version of Dream Weaver CS6... I currently am using Coffee Cup HTML editor. Probably, but it's always better to code by hand than relying on WYSIWYG programs. |
coothead |
May 13 2023, 10:46 AM
Post
#11
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there rotcodam,
coothead This post has been edited by coothead: May 13 2023, 10:47 AM |
rotcodam |
May 13 2023, 11:59 AM
Post
#12
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
Hi there rotcodam,
coothead Coothead! Thank you so much, this is exactly what I needed. I will dig into this and begin to understand the CSS/HTML structure and get a good understanding of how things work, thanks to your help. As you can tell, I know just enough about HTML to be dangerous!, and I don't know squat about CSS... about to learn though. Thanks again and have a great weekend. |
coothead |
May 13 2023, 03:17 PM
Post
#13
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
. Coothead I don't know squat about CSS... about to learn though.
coothead This post has been edited by coothead: May 13 2023, 03:19 PM |
Christian J |
May 13 2023, 07:53 PM
Post
#14
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
You will possibly find this very strange to begin with. This game... Flexbox Froggy ...may amuse you whilst simultaniously aiding your comprehension of this... Thanks, that made even me try to learn Flex! 🐸 |
rotcodam |
May 14 2023, 11:09 AM
Post
#15
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 |
This game... Flexbox Froggy ...may amuse you whilst simultaniously aiding your comprehension of this... MDN - Basic concepts of flexbox coothead Very helpful with learning flex, after #20 FBF it got challenging Thanks! |
coothead |
May 14 2023, 02:52 PM
Post
#16
|
Advanced Member Group: Members Posts: 206 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
|
Lo-Fi Version | Time is now: 13th May 2024 - 04:15 AM |