Over My Head

User 2158474 Photo


Registered User
7 posts

I do not understand html. I am using https://www.homestead.com/ to build my website. I can make an image map and it works ok when I test it in the mapping program, but this is what my site looks like when I go to my website.

http://www.amishleatherworkgear.com/

Can anyone tell me what to do? (In english please, not html talk)
User 187934 Photo


Senior Advisor
20,245 posts

Unfortunately I'm going to mention HTML because this is the problem.:)
Look for this line of code.
<img border="0" usemap="#image map 4 1" src="Image Map 4 1.jpg">
change it to this
<img border="0" usemap="#image map 4 1" src="Image_Map_4_1.jpg">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2158474 Photo


Registered User
7 posts

Thanks for the fast response. I can can change the html when you spell it out like that and I am figuring out a few things by trial and error.

I have it working now. If you could tell me a few other things, I might actually have a website made in the near future.

1 - I would like to have a border. I figured out how to make it. How do you change the color?

2 - If you click on the front nail pouch, it opens in the same window, but when you click anywhere else it opens a new window. At this point I'm not sure which way I want it to work. Can you show me what makes it work one way or the other?

User 187934 Photo


Senior Advisor
20,245 posts

What code are you using to make your border?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2158474 Photo


Registered User
7 posts

This is the entire code. The border code was made by the image mapper and originally said BORDER=0.

I am learning some as I go. I actually got the hammer loop to work in the image by adding more code just a few minutes ago.

Also I thought of one more question.
3 - What do I put in, and where do I put it, to move the picture to a different place on the page.

<html>
<head>
<title> Tool Pouch</title>
<meta name="generator" content="CoffeeCup Image Mapper">
</head>
<body>

<!-- Created by CoffeeCup Image Mapper (www.coffeecup.com) -->

<!-- Beginning of Client Side Image Map -->
<img src="Image_Map_4_1.jpg" USEMAP="#image map 4 1" BORDER=5> <<<<<<<<<<<<<HERE
<map name="image map 4 1">
<area name="Small Pouch" shape="rect" coords="220,250,400,380" href="http://www.amishleatherworkgear.com/Test2.html" alt="Small Pouch" title="Small Pouch" OnMouseOver="window.status='Small Pouch'; return true" OnMouseOut="window.status=''; return true" target="_top">
<map name="image map 4 1">
<area name="Hammer Loop" shape="rect" coords="150,270,230,360" href="http://www.amishleatherworkgear.com/Test3.html" alt="Hammer Loop" title="Hammer Loop" OnMouseOver="window.status='Hammer Loop'; return true" OnMouseOut="window.status=''; return true" target="_top">
<area shape="default" href="http://www.amishleatherworkgear.com/Test1.html" target="top">
</map>
<!-- End of Client Side Image Map -->
</body>
</html>
User 187934 Photo


Senior Advisor
20,245 posts

Try this.:)
<img src="Image_Map_4_1.jpg" USEMAP="#image map 4 1" BORDER=5 style="border-color:#FF0000;">
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2158474 Photo


Registered User
7 posts

That worked. Thanks for the help.

I will keep experimenting with questions 2 & 3. I would never have figured out to add underscores to make my site work though.
User 187934 Photo


Senior Advisor
20,245 posts

I can help you with the other questions.
Center map.:)

<div align="center"> CC map code goes here </div>


Look at your links for this part.
target="_top"

target="_blank" = Link will open in new window
target="_top" = Link will clear any existing frames and open URL as the uppermost document
target="_parent" = Link will open in parent frame (if several levels deep). Equal to "_top" if only one level frameset
target="_self" = Link will open in current frame/window etc, whichever is applicable
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2158474 Photo


Registered User
7 posts

Thanks for all the help.

I intend to make a simple web site using several image maps to show the details of the things I intend to sell.
User 2158474 Photo


Registered User
7 posts

I am sorry to be asking so many questions, but it is taking me hours trying to figure things out by taking wild stabs at inserting pieces of code that I can't even understand.

I have this code (from Homestead Forum) that works to make a pop-up window. Is there a way to use this in the mapping code to have a pop-up appear instead of just text when you hover your mouse over the different areas of my image map and open a new window when you click on it?

I also can't figure out how to get my image map lower down in the page.

<script type="text/javascript">
function goImgWin(myImage,myWidth,myHeight,origLeft,origTop) {
myHeight += 24;
myWidth += 24;
TheImgWin = window.open(myImage,'image','height=' +
myHeight + ',width=' + myWidth +
',toolbar=no,directories=no,status=no,' +
'menubar=no,scrollbars=no,resizable=no');
TheImgWin.resizeTo(myWidth+2,myHeight+30);
TheImgWin.moveTo(origLeft,origTop);
TheImgWin.focus();
}
</script>


<a href="http://www.homesteadconnection.com/2009DesignChanges/SEO-puzzle.jpg" target="_blank"
onclick="goImgWin('http://www.homesteadconnection.com/2009DesignChanges/SEO-puzzle.jpg',289,302,100,50);
return false;"><img src="http://www.homesteadconnection.com/2009DesignChanges/HdrHouse.jpg"
width="96" height="99" border="0"
alt="SEO PUZZLE" align="left" /></a>

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.