home page image mapping

[bsharp]

I have a single photo, consisting of 16 different photos taken from my website on my home page. I would like to have the users be able to click on one of the 16 rectangle photos, and to to the page that has that photo. I've tried using image map generators found on the web, I've tried customizing my own html, but nothing seems to work. As soon as I replace the current code with an image mapping code, I see nothing. So I know I'm doing something wrong, but don't know what.

Does anyone know of a tutorial, or a image map generator that works on SmugMug? Or just some sample coding would be great.

Thanks,

[photokandy]

I have a single photo, consisting of 16 different photos taken from my website on my home page. I would like to have the users be able to click on one of the 16 rectangle photos, and to to the page that has that photo. I've tried using image map generators found on the web, I've tried customizing my own html, but nothing seems to work. As soon as I replace the current code with an image mapping code, I see nothing. So I know I'm doing something wrong, but don't know what.

Does anyone know of a tutorial, or a image map generator that works on SmugMug? Or just some sample coding would be great.

Thanks,

Can you paste the code you've been trying in here? It should be possible, but without seeing what you're using, I'm unsure if I'm thinking along the same lines as you.

[bsharp]

Can you paste the code you've been trying in here? It should be possible, but without seeing what you're using, I'm unsure if I'm thinking along the same lines as you.

This is code if from online image map generator. http://www.image-maps.com/

HTML:

<div style="text-align:center; width:1024px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_9200908261421483" src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" usemap="#Image-Maps_9200908261421483" border="0" width="1024" height="683" alt="" />
<map id="_Image-Maps_9200908261421483" name="Image-Maps_9200908261421483">

<area shape="rect" coords="0,0,254,169" href="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" alt="City County Building" title="City County Building" />

<area shape="rect" coords="255,0,509,169" href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL-1.jpg/" alt="Utah Capitol Building" title="Utah Capitol Building" />

<area shape="rect" coords="511,1,765,170" href="http://www.saltlakeimages.com/photos/627413789_9ucSL-XL.jpg/" alt="LDS Salt Lake Temple" title="LDS Salt Lake Temple" />

<area shape="rect" coords="1022,681,1024,683" href="http://www.image-maps.com/index.php?aff=mapped_users_9200908261421483" alt="Image Map" title="Image Map" />
</map>
</div>

CSS:
<style type="text/css">
dl.image_map {display:block; width:1024px; height:683px; background:url(http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg); position:relative; margin:2px auto 2px auto;}
a.LINK0 {left:0px; top:0px; background:transparent;}
a.LINK0 {display:block; width:254px; height:0; padding-top:169px; overflow:hidden; position:absolute;}
a.LINK0:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK1 {left:255px; top:0px; background:transparent;}
a.LINK1 {display:block; width:254px; height:0; padding-top:169px; overflow:hidden; position:absolute;}
a.LINK1:hover {background:transparent; border:1px dashed black; color:black;}
a.LINK2 {left:511px; top:1px; background:transparent;}
a.LINK2 {display:block; width:254px; height:0; padding-top:169px; overflow:hidden; position:absolute;}
a.LINK2:hover {background:transparent; border:1px dashed black; color:black;}

a.BLINK {left:1022px; top:681px; background:transparent;}
a.BLINK {display:block; width:202px; height:17px; overflow:hidden; position:absolute; font-size:0px;}
a.BLINK:hover {background:black; border:1px dashed white; color:white; font-size:9px;}

</style>

<dl class="image_map">
<dd><a class="LINK0" title="City County Building" href="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg/"></a></dd>
<dd><a class="LINK1" title=Utah State Capitol"href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"></a></dd>
<dd><a class="LINK2" title=LDS Salt Lake Temple"href="href="http://www.saltlakeimages.com/photos/627413789_9ucSL-XL.jpg"></a></dd>

<dd><a class="BLINK" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_9200908261421483">Mapped @ Image Mapper</a></dd>
</dl>


I also tried only HTML from http://www.pangloss.com/seidel/ClrHlpr/imagemap.html:



<map name="mymap">
<!-- rectangle1 -->
<area shape=rect coords="0,0,254,169" href="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg">
<!-- rectangle2 -->
<area shape=rect coords="255,0,509,169" href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg/">
<!-- rectangle3 -->
<area shape=rect coords="511,1,765,170" href="http://www.saltlakeimages.com/photos/627413789_9ucSL-XL.jpg">
<!-- everywhere else -->
<area shape=default href="http://www.whatever_you_want.com/to_point/default.html">
</map>


Using either code in the Bio Page make the image disappear, and only shows Bio edit.

Let me know if you need any other information.
Thanks, Brad
http://saltlakeimags.com

[photokandy]

If you use this code, does it work?


<map name="mymap">
<area shape=rect coords="0,0,254,169" href="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg">
<area shape=rect coords="255,0,509,169" href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg">
<area shape=rect coords="511,1,765,170" href="http://www.saltlakeimages.com/photos/627413789_9ucSL-XL.jpg">
<area shape=default href="http://www.saltlakeimages.com/">
</map>
<img src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" usemap="#mymap" border="0" width="1024" height="683" alt="">

[bsharp]

If you use this code, does it work?


<map name="mymap">
<area shape=rect coords="0,0,254,169" href="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg">
<area shape=rect coords="255,0,509,169" href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg">
<area shape=rect coords="511,1,765,170" href="http://www.saltlakeimages.com/photos/627413789_9ucSL-XL.jpg">
<area shape=default href="http://www.saltlakeimages.com/">
</map>
<img src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" usemap="#mymap" border="0" width="1024" height="683" alt="">


No. After I save, the only thing I see is Your Bio | edit, then the footer.

[photokandy]

No. After I save, the only thing I see is Your Bio | edit, then the footer.
Wow. Okay - that should've worked. I checked your site this morning and noticed that there was no middle image, is that what it looks like after you do this? What is interesting is that (if it is), the source just looks like this:


<div id="userBio"><br />
<br />
<br />
<br />
<br />
<br />
</div>


Which is.... odd, to say the least.

What if we try another way: instead of one big image, have 16 small images, each linked up?

Something like this:

<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>
<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>
<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>
<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>


Does that show up in your bio when entered?

[photokandy]

Oh, btw, sometimes I have a problem where after editing the bio my slideshow and stuff doesn't load. I usually have to refresh the page or go to another page and then go back to the homepage to see if it worked. Maybe that's part of what's going on here? Just a thought...

[Allen]

Oh, btw, sometimes I have a problem where after editing the bio my slideshow and stuff doesn't load. I usually have to refresh the page or go to another page and then go back to the homepage to see if it worked. Maybe that's part of what's going on here? Just a thought...
Anytime entering the bio and exiting, the javascript has to be reloaded to run
the slideshow. Refresh the page.

[bsharp]

Wow. Okay - that should've worked. I checked your site this morning and noticed that there was no middle image, is that what it looks like after you do this? What is interesting is that (if it is), the source just looks like this:


<div id="userBio"><br />
<br />
<br />
<br />
<br />
<br />
</div>

Which is.... odd, to say the least.



Yes, that's what it looks like after I entered the code you suggested. I left it like that so you could see what it looks like.


What if we try another way: instead of one big image, have 16 small images, each linked up?

Something like this:
[code]
<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>
<div style="text-align:center">
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
<a href="http://www.saltlakeimages.com/photos/598901632_B9rnu-XL.jpg"><img border=0 src="http://www.saltlakeimages.com/photos/598901632_B9rnu-255x170.jpg"></a>
</div>
etc....


I tried this code (copied from here, clicked on edit next to Your Bio | , pasted, saved, refreshed, went to another page and back, and nothing.

The only thing that works is this:


<html>
<center>
<img src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" >
</image>
<p>
<br/>
</p>
<p>
High resolution, quality stock images of Salt Lake City that make you say, "Wow!"
</p>
</center>
</html>
</a>
</html>



I now have that in my Bio description so you can see what it looks like.



Thanks,

[Allen]

Yes, that's what it looks like after I entered the code you suggested. I left it like that so you could see what it looks like.



I tried this code (copied from here, clicked on edit next to Your Bio | , pasted, saved, refreshed, went to another page and back, and nothing.

The only thing that works is this:


<html>
<center>
<img src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" >
</image>
<p>
<br/>
</p>
<p>
High resolution, quality stock images of Salt Lake City that make you say, "Wow!"
</p>
</center>
</html>
</a>
</html>


I now have that in my Bio description so you can see what it looks like.



Thanks,
You can only have one set of html tags. One at the start and one at the finish with every thing in between.

[bsharp]

You can only have one set of html tags. One at the start and one at the finish with every thing in between.

Woops :dunno

[photokandy]

You can only have one set of html tags. One at the start and one at the finish with every thing in between.
D'oh! Good catch. I didn't notice those extra tags when looking at the code and trying to figure how in the world it wasn't working... (Yes, it's a Friday and my brain is SO dead right now.....!)

Brad - does it work if you take out the extra set of HTML tags? (fingers crossed!)

[bsharp]

D'oh! Good catch. I didn't notice those extra tags when looking at the code and trying to figure how in the world it wasn't working... (Yes, it's a Friday and my brain is SO dead right now.....!)

Brad - does it work if you take out the extra set of HTML tags? (fingers crossed!)

Even a bigger D'oh!!! I was lucky to have put that extra HTML tag in the code that I said worked. It did work, even with the extra HTML. But that wasn't the problem. The problem was, me - not knowing how to code very well, I didn't have any HTML tags - just the code that I copied :dunno I put your code in between the HTML tags, and Wola! It works!

Here is the code that works - for the first four photos/rectangles, but I think I can figure out the rest images/icons/Laughing.gif



<html>
<center>
<map name="mymap">
<area shape=rect coords="0,0,254,169" href="http://www.saltlakeimages.com/Salt-Lake-City-Images/The-City-1/8933639_oWZaC#611549768_BWMqZ.jpg" alt="City County Building" title="City County Building" />
<area shape=rect coords="255,0,509,169" href="http://www.saltlakeimages.com/Salt-Lake-City-Images/The-City-1/8933639_oWZaC#598901632_B9rnu">
<area shape=rect coords="511,1,765,170" href="http://www.saltlakeimages.com/Salt-Lake-City-Images/SLC-Churches-Temples/8933631_tawu2#627396637_xtdFk">
<area shape="rect" coords="765,0,1019,169" href="http://www.saltlakeimages.com/Salt-Lake-City-Images/The-City-1/8933639_oWZaC#623915459_4QoM5/" alt="Window Reflections" title="Window Reflections" />
</map>

<img src="http://www.saltlakeimages.com/photos/628615756_bQNo8-XL.jpg" usemap="#mymap" border="0" width="1024" height="683" alt="">
<p>
High resolution, quality stock images of Salt Lake City that make you say, "Wow!"
</p>
</center>
</image>
</html>



Thanks so much for your help, patience, and knowledge.
Brad