Input Form on Top of Image Map Help Options

[rotcodam]

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]

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]

What he said.

[coothead]

Hi there rotcodam,

also note that your chosen method is not responsive and would
require horizontal scrolling on screen widths less than 1920px.

Good coding practice will cater for all possible screen sizes.

coothead

[rotcodam]

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]

Hi there rotcodam,

if you give me all the images used, I will
knock up an example page for you to try.

coothead

[rotcodam]

Hi there rotcodam,

if you give me all the images used, I will
knock up an example page for you to try.

coothead

Not sure how to get them to you? PM? email?

Thanks!

[coothead]

Hi there rotcodam,

put the images a zip file then when you start a new post, scroll down the page a little until you see this...


Click on More Options and you will see this..



Click on Browse to upload you zip file then click on Add this Attachment

You will then see this...


All being well you should see your zip file instead of attach.png
If this is so, then click Add Into Post

Job done.

coothead

[rotcodam]

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]

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

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]

Hi there rotcodam,

thanks for supplying your images.

Here is what I did with them...

 rotcodam.zip ( 118.6k ) Number of downloads: 57


You will find that it will work well on all screen widths.

All that you have to do is put appropriate addresses in the eleven links.

coothead

This post has been edited by coothead: May 13 2023, 10:47 AM

[rotcodam]

Hi there rotcodam,

thanks for supplying your images.

Here is what I did with them...

 rotcodam.zip ( 118.6k ) Number of downloads: 57


You will find that it will work well on all screen widths.

All that you have to do is put appropriate addresses in the eleven links.

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]

. Coothead I don't know squat about CSS... about to learn though.

As you will see in the CSS, I have used display: flex for the page srtucture.
You will possibly find this very strange to begin with.
This game...

Flexbox Froggy

...may amuse you whilst simultaniously aiding your comprehension of this...

MDN - Basic concepts of flexbox

coothead

This post has been edited by coothead: May 13 2023, 03:19 PM

[Christian J]

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]

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]

Hi there Christian J and rotcodam.

I makes me extremely happy to know that




has persuaded you to take a mild interest
in Flexbox methodology.

coothead

This post has been edited by coothead: May 14 2023, 03:41 PM