![]() |
![]() ![]() |
![]() |
rotcodam |
![]()
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 |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,688 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 |
![]()
Post
#3
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,744 Joined: 9-August 06 Member No.: 6 ![]() |
What he said.
![]() |
coothead |
![]()
Post
#4
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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 |
![]()
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 |
![]()
Post
#6
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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 |
![]()
Post
#7
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 ![]() |
|
coothead |
![]()
Post
#8
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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 |
![]()
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 |
![]()
Post
#10
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,688 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 |
![]()
Post
#11
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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 |
![]()
Post
#12
|
Group: Members Posts: 7 Joined: 19-October 15 Member No.: 23,659 ![]() |
Hi there rotcodam,
coothead Coothead! ![]() 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 |
![]()
Post
#13
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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 |
![]()
Post
#14
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,688 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 |
![]()
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 |
![]()
Post
#16
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 211 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: 25th June 2024 - 06:25 AM |