Graphics Question

[sanders720]

I have a jpg image on a web page. I would like to add labels to the jpg, and turn them to links so when I click on them, another jpg image will come up in front of them.

The problem is, html does not seem to like putting link text strings on top of an image. Can someone get me started as to how this is controlled?

Thanks in advance for the help!

 

[kaht]

I always use tables to arrange things on the page where I want them to be, I find it easier than setting the x/y coordinates:

<table border=0 cellspacing=0 cellpadding=0>
<tr><td><a href='[URL unfurl="true"]http://www.google.com'>Google</a></td></tr>[/URL]
<tr><td><img src='yourpic.jpg'></td></tr>
</table>

-kaht

 

[sanders720]

So I have one image. Does this become kind of like an invisible chessboard in the background where I can add my text, over a related area on the pic?

How do I control the size of the matrix?

Thanks for your help on this.

 

[kaht]

Google is a wonderful tool. I suggest you read up on tables to help positioning web elements. There are plenty of tutorials on the web on how to use tables for this purpose, so it would be silly for me to retype one here.

-kaht

 

[wing2x]

CSS is the right tool for the job. It not possible to place your text above an image using table layouting (without CSS positioning), unless your text is actually part of the image -- by editing it in an image editing program.

You must put your image and the text inside a div element. This div element should have a position style other than static, position:relative is a usual choice. Now, absolute positioned elements inside it will be positioned relative to the div.

Your html should look like this:

<div class="linkcontainer">
   <img src="myimage.jpg" alt="">
   <a href="yourlink.html">Click Here!</a>
</div>

Your CSS would look something like this:

div.linkcontainer {
   position:relative;
}
div.linkcontainer a {
   position:absolute;
   left:5px;
   top:30px;
}

If all these are new to you, you should read up an intro to CSS. There are a lot on the web. I got started with this:

http://westciv.com/style_master/academy/hands_on_tutorial/index.html

It not only teaches you about CSS but rather more important is how to use CSS for layouts, which provides a lot of advantage in terms of accessibility. Using tables for layout, your page will likely not be readable or optimally displayed on small-screens (mobile phone & pda browsers) which is growing in number today.

Alternatively, you could use image maps. But image maps are also not very accessible, but should address your need.

 

[sanders720]

I entered all this. I believe I should see the text "Click Here!" somewhere.

The other problem is that I have one image, and I want to have several text string links to other files. Think of a map of a county. I want to click on cities on the map and bring up a picture of the city.

Thanks thus far!

 

[wing2x]

sanders720,

You might need to add "z-index: 1;" to div.linkcontainer a {

For more detailed tutorial, you might want to take a look at this which implements an image map concept using CSS:

http://www.alistapart.com/articles/imagemap/

This may be close to what you're looking for. In this tutorial, if you want your links to be text, do not use

#menu a i { visibility: hidden; }

and you may remove the <i> tag in the html.

good luck!
wing

 

[sanders720]

What's missing? I've done my HTML and CSS. The text is not within the image, but underneath. Also, the image source is referenced twice.

I'm pretty sure this portion is doing nothing.

#map {
background-image: (layout.jpg)
}

Thanks for the help!

HTML:

<div id="map">
<img src = "layout.jpg" alt="">
<div id="menu">
<a href="overall.jpg" id="overall"><i>Overall View</i></a>


</div>
</div>


CSS:

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

#map {
background-image: (layout.jpg)
}

#menu a {
position: absolute;
height: 38px;
width: 88px;
top: 31px;
text-decoration: none;
}

#menu a i {visibility: hidden;}

a#overview {top: 10px;}

 

[wing2x]

remove the <img> tag, the image is displayed as the background of #map. also, add a width and height to #map

HTML:

  <div id="map">
    [red][s]<img src = "layout.jpg" alt="">[/s][/red]
    <div id="menu">
      <a href="overall.jpg" id="overall"><i>Overall View</i></a>
    
    
    </div>
  </div>


CSS:

body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;    
    margin: 0px;
    padding: 0px;
}

#map {
  background-image: [red]url[/red](layout.jpg);
  [red]width: [i]the width of your image[/i];
  height: [i]the height of your image[/i];
  position:relative;[/red]
}  

[red]#menu {
  position: absolute;
  top: 31px;
  left: [i]the left position[/i]
}[/red]

#menu a {
    [red][s]position: absolute;[/s]
    [s]height: 38px;[/s]
    [s]width: 88px;[/s]
    [s]top: 31px;[/s][/red]
    text-decoration: none;
}

[red][s]#menu a i {visibility: hidden;}[/s][/red]

 

[sanders720]

Okay, this works. Two additional questions:

1. How do I place multiple menu items in the CSS? The id in the HTML is apparently used for the file reference, but how are the coordinates manipulated in the CSS?

2. In my image referenced in CSS, it is 600px X 525px. I used a lot of trial and error to figure this out. Is there a way to use the default image size?

Thanks again for your help on this.



HTML:

<div id="map">
<div id="menu">
<a href="illustrations/overall.jpg" id="overall"><i>Overall View</i></a>


</div>
</div>

CSS:

body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
}

#map {
background-image: url(illustrations/layout.jpg);
width: 600px;
height: 525px;
position: relative;
}

#menu {
position: absolute;
top: 31px;
left: 10px;
}

#menu a {
text-decoration: none;
}

a#overview {top: 10px;}

 

[wing2x]

To add more menus:

HTML:

  <div id="map">
    <div id="menu">
      <a href="illustrations/overall.jpg" id="overall"><i>Overall View</i></a>
    </div>
    [red]<div id="menu2">
      <a href="illustrations/target2.jpg" id="overall"><i>Your text</i></a>
    </div>[/a]
  </div>

CSS:
#menu2 {
  position: absolute;
  top: XXpx;
  left: XXpx;  
}

for your 2nd question, CSS does not check for the sizes of images it references. Most image viewers and editors display this information. If you're using Windows, this info is even available by selecting an image file in Win Explorer, image dimensions are displayed in the status bar.

 

[sanders720]

Thankyou!

 

[sanders720]

Here's another thought. At the end of the project, I want to open this file with Adobe PDF writer, and save it as a PDF document.

With the graphics being referenced from CSS, this is ignored. Apparently PDF only deals with HTML. Is there a way around this besides creating an alternate document showing the graphics conventionally?

Thanks.

 

[sanders720]

#map1 works great. I tried to add #map2 to my CSS, and it would not load the image. Is it permissable to have mnore than one map in a CSS?

Also, in the HTML code below, what does the id do for me?

Thanks ahead of time for any help you can provide.


HTML file:

<div id="map2">
<div id="menu12">
<a href="../JobsDatasheet_Image.jpg" id="jobs1">></a>
</div>
</div>

CSS file:

#map1 {
background-image: url(MainMenu_Image.jpg);
width: 922px;
height: 472px;
position: relative;
}

#menu1 {
position: absolute;
top: 228px;
left: 290px;
}

#menu2 {
position: absolute;
top: 264px;
left: 290px;
}

#map2 {
background-image: url(Jobs_Image.jpg);
width: 907px;
width: 743px;
position: relative;
}

#menu12 {
position: absolute;
top: 228px;
left: 290px;
}