How to make an image a link?

I'm sort of new to HTML, but this problem is beyond frustrating. I am using the design display in Dreamweaver, and it still isn't working, and I"m not even coding the HTML. Here is the problem. I have an image on the main page, and I want that image to be a link. However, when I do that, and I preview in a browser, it just duplicates the image. So there are TWO images, even though there is code for only one. And the top one isn't a link, and the bottom one is. Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><img src="../pacayaMENU.jpg"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ian Bassingthwaighte</title>
<style type="text/css">

</style></head>
<center>
<body>
<a href="index.html"><img src="../front.jpg" alt="Let us all be elephants." border="0" align="middle"></a>
</body></center>
</html>
So what happens, as I said, is that front.jpg is duplicated, and there are two of them, and only one of them is a link. What am I doing wrong?

Use the code validation tools below and fix reported errors.
HTML Validator - http://validator.w3.org
CSS Validator - http://jigsaw.w3.org/css-validator/
HTML & CSS Tutorials - http://w3schools.com/
I'm guessing you have a CSS rule applying an image to a #div background. Thus you are seeing double images but only one is showing in the HTML markup.
For best results in these forums, post a URL to your live page so we can *SEE* what you see.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Similar Messages

How to make site root-relative links work in DW and Server both?

See details on buggy DW image link behavior, below. My question is:
1) how to make site root-relative links work in DW and Server both? Or…
2) how to reliably automate the change of several hundred legacy root-relative links of the form
/images/image.jpg to document-relative?
That is, to
../images/image.jpg or
../../images/image.jpg or
../../../images/image.jpg etc…depending on where the directory is.
The old format (/images/image.jpg ) used to work fine in my previous DW 8 configuration but appear grey in DW after “upgrading” to DW cs5.5 mac. (they look fine on the server, but it’s hard to edit image-heavy pages locally when they are all grey).
I tried changing the files to how DW creates root relative links now:
/public_html/images/image.jpg, which is a very easy, attractive root flow since there’s a one-to-one mapping. These look great in DW but are broken on the server!
I looked at the “advanced” site setup, and it looked like it might be possible to nuke the /public_html/ part of my server info…but it also looked like there was the potential for doing damage changing these settings, which are automatically generated from our server connection settings, which seem to work.
The “links relative to document/ site root” toggle…does that change how DW interprets existing links, or just change the default when you are adding a link? I have made 80% of the file links document relative…before wondering if root-relative isn’t better?
It sure seems less ambiguous for all those images if theres a way to make root relative work for DW design view, DW link check, and server.
Summary of buggy behavior: (see test with images here)
"old style" site root link
      /images/img_book/WScover120x150_NEW.jpg
      Design veiw in DW: broken (grey w/ broken icon)
      Link check in DW: "external link" (i.e., uncheckable, + file could appear orphaned)
      Browser: good
      Ease of switching: n/a (existing format)
"new style" site root relative link
      /public_html/images/img_book/WScover120x150_NEW.jpg
      Design veiw in DW: good
      Link check in DW: good
      Browser: broken
      Ease of switching: easy
Document relative link
      ../../images/img_book/WScover120x150_NEW.jpg
      Design veiw in DW: good
      Link check in DW: good
      Browser: good
      Ease of switching: hard (how to automate?)
Absolute link
      http://www.oasisdesign.net/images/img_book/WScover120x150_NEW.jpg
      Design veiw in DW: broken (grey w/ broken icon)
      Link check in DW: external (i.e., uncheckable, + file could appear orphaned)
      Browser: good
      Ease of switching: n/a...not a real option
Thanks!
Similar discussion on "/"

Hello again Jon!
Thanks for jumping on this.
All clear and understood about where publc_html is etc.
No contemplation of nuking the actual public_html directory on the server, just the "/public_html" text string at the start of the DW-generated links.
"/public_html" is automatically added to the front of the link in DW if I create the link with any of the GUI tools, if I have "site root relative" selected. And ""/public_html" ends up in the code, and gets uploaded that way to the server, where it (obviously) doesn't work.
Doesn't sound like it is supposed to work this way. Also, what seems to be the usual root relative format (/images/image.jpg) shows as a broken link in the GUI and an external link in the DW link check. All this togther makes me thinkI have some obscure setting incorrect?
The setting that caught my eye is manage sites/ site setup/ advance settings/ local info/ web url, which is automatically set to http://www.oasisdesign.net/public_html/
it gives an option to change it but it makes every effort to make this NOT look like something users should mess with:
Having gone through the more careful thought process during this post, I'm ready to do the experiment of changing the remote server web URL (why is it wrong by default?)...think I'll eat dinner first so there's 45 min to avert disaster if anyone knows this to be a bad idea!
Art
PS--don't have a local testing server...don't think this will solve the GUI broken link/ link shows as external problems.
Is there an easy, automated way to change links sitewide from document to root relative?

How to make a magnifying glass link to a look up table ?

Dear Friends,
Hello. I am developing the accounting application of journal entry. In journal line, I use the image "magnifying glass" next to each chart field. When we click on the magnifying glass, it's supposed to come up a look up table( a chart and name mapping table), and we select the proper chart to input into the chart field.
I understand to create another record and page for the look up table. But I don't understand how to make a magnifying glass link to a look up table. Can anybody tell me how to do that ? Thanks.
Lucy

This is how it works,
Table A (which stores chart fields). You have used fields from table A on a page so that users can input data.
You don't need to put a magnifying glass image or create a new page to achieve look up page.
all you need to do is create another table say Table B which should have the chart field and corresponding description you want to show on lookup page. Then open record-field property of the chart field on Table A and mention Table B as prompt table.

How to make slide images with Dreamweaver CS6?

How to make slide images with Dreamweaver CS6? Please teach me.

Hello
in addition to Jon's hint, I'll send you some links to nice sliders (have fun with the different representations ):
http://sandbox.scriptiny.com/javascript-slideshow/
http://jquery.malsup.com/cycle/
http://wowslider.com/best-jquery-slider-crystal-linear-demo.html
http://www.jcoverflip.com/demo
http://www.jacksasylum.eu/ContentFlow/
http://addyosmani.com/blog/jqueryuicoverflow/
You only need to use the source code to implant these shows there where you want. In my eyes it would be the best that you use first a very new and blank DW file to perform (maybe in LiveView) the one or the other.
Hans-Günter

How to make visible Time Sheet link

Hi,
I want to know how to make visible Time Sheet link on portal for a particular Personnel Area so that employees of this PA can fill their Time Sheet from the portal.

HI,
Use Tcode - CAT 2
Regards,
Shadeesh.G

How to make keynote images full screen?

Question: how to make keynote images full screen? I just noticed. after many successful full screen shows with Keynote 09 5.1.1 that I am no longer seeing the show full screen, at 1280, but only using the center part of my macbook pro 13 inch screen (which will mirror just like that on the projection screen, as far as I know). Did I hit a setting I do not know about to keep the images so small?
Thanks

Keynote > Preferences > Slideshow: Scale slides to fit display

How to make mirror image on officejet pro 8600

how to make mirror image on officejet pro 8600

Hi,
You can not make mirror images with printers but you can print mirror images on printers. This is how to print mirror images on a normal printer:
http://h10025.www1.hp.com/ewfrf/wc/document?cc=us&dlc=en&docname=bpu02032&lc=en&product=61561
Regards.
BH
**Click the KUDOS thumb up on the left to say 'Thanks'**
Make it easier for other people to find solutions by marking a Reply 'Accept as Solution' if it solves your problem.

How to make the images show up on a linked file in Muse?

I am wondering how to get my images to show up on the linked files in Muse. Basically, in Muse, I have a page that links to other pages I designed in Dreamweaver. I put the images in the image folder and when I upload the site, the page links to the Dreamweaver page ok but the images are missing. This is a vital part of the site. Any suggestions?

If you made the pages with Dreamweaver then they should be on your system some place and you could make a "dreamweaver" folder inside your Muse site and upload the pages to that folder using the upload files option... see this thread talks about sound files but almost any file can be imported to muse
I need a recommendation for a slick way to embed audio
Another option is to link across to an online resource using the built in muse html editor but that has pit falls because once you link yourself outside the site you also lose some control of the content;
For an example of this have a look at an old demo page I made http://chec-garry2.businesscatalyst.com/index.html
When you click on the Brahminy Kite bird you are looking at what used to be called an Iframe but the problem of control is highlighted when you click the Blue Wren and sometimes get pop up adds… I could import the Blue Wren page into my Muse site to fix this issue and in your case that’s a good option but I didn’t because I don’t have copyright over that pages contents and didn’t want to steal someone else’s work.
p.s. if you have got a demo of the website/ pages online someplace that would help us see your problem.

How to make background image editable in a template

I have built a template and would like to make the background
image editable, but not the rest of the settings in the body style.
(I'm not sure of my terminology yet.) The background image is
currently set in the locked part of the page. I've tried to insert
an editable region in the html code, as I cannot get to the
background image by clicking on it or selecting on the Design page.
But I am not allowed to change the code in this way.
What is the best way to do this? I'm not sure how to make a
div of this one setting. Or even if that is what is needed.
Thanks for any suggestions.

So to give a different background image to different pages using CSS.
Create a CSS file in your Dreamweaver site.
Link it to your pages.(in your head tag like so: <link href="path/to/stylesheet.css" rel="stylesheet" type="text/css" />)
In your HTML code find the body tag and give it an id (like so: <body id="myUniqueID">)
In your stylesheet write the following code:
#myUniqueID{
background: #color, url("path/to/image.jpeg") repeat);
And now extrapolate the above steps and code to your other pages and voila, you now have different background images for your different pages.
To learn more about CSS - visit your local web search engine.
To see the power of CSS, check out http://csszengarden.com/ where the exact same HTML file is styled by different CSS stylesheets.

How to make an Image in Adobe Muse 100% height ?

100% width, it's ok; but I don't find how to make a 100% height image (wich follows my browser height)?
I work with adobe Muse CC 2014
thanks !

You can use the image as browser fill and then set the position of image such that it remains to its position. This can be used as a workaround for using image as browser height.
Thanks,
Sanjit

DVD burned on one G4 will not open up on another. How to make an image?

Hello,
This is a bit of a desperate problem, I have a dvd that was created of a 1.4 hour program and burned using iDVD3.0.1 on a G4 500 Mhz machine. Once the dvd is created I am able to play it on that computer using dvd player. I am running Tiger on that machine.
Once I take that dvd over to my G4 1GHz machine also running tiger, the machine will simply not accept the dvd and keep ejecting the dvd; dvd player does not even open up in order for me to look at the video.
The main purpose of me having to look at the dvd on the G4 1Ghz machine is to copy the dvd. Can you also briefly describe how to make a copy of a video dvd created using iDVD? I believe I have to make an image first. I cannot remember how to do that, please help. Once the image is made how do I copy that image onto a fresh dvd?
Thanks,
Vidur

Hi Vidor
first:
I use DVD-R disks
And Verbatim brand
second
iDVD 3.xx doesn't create Disk Images. Neither does iDVD 4
(if iDVD prior HD/5 You have to add a hack to make this possibly
named HPfurz and install it)
Works on iDVD 4 - for iDVD 3 I don't know.
Test this with Apple DVD-player - OK then burn it with iDVD
or Toast if You have and don’t want to re-code the movie.
third
To make a DVD copy You need
- a NON copy protected DVD
- a program that can make it into a Disk Image eg. Roxio Toast™ (costs)
- a new blanc DVD-R disk
If Apple Disk Util tool - can make a disk image is out of my knowledg.
Yours Bengt W

How to make background image scalable

I am working on my site and I am constructing it using only
external CSS. I am looking for a different look than I have
previously done and want to use an actual image for the back ground
of one of the DIV containers rather than just a color. My problem
has been since I want my site to be fluid I need to find a way to
have the image scale with the container. I could have sworn I saw
how to change this attribute during some online reading I had done
but I can not find it. Can anyone here help?
Dara

Scaling images is usually a bad thing - they will lose both
aspect ratio and
image quality when you do.
However, if you are willing to suffer these indignities, you
can place an
image into a div that is 100% height/width (of whatever the
<div> tag's
contaner is), and make the image 100% height/width as well.
Depending on
the layout, that could accomplish your goals.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Dara_BSI" <[email protected]> wrote in
message
news:f4vm0n$kei$[email protected]..
>I am working on my site and I am constructing it using
only external CSS. I
>am
> looking for a different look than I have previously done
and want to use
> an
> actual image for the back ground of one of the DIV
containers rather than
> just
> a color. My problem has been since I want my site to be
fluid I need to
> find a
> way to have the image scale with the container. I could
have sworn I saw
> how to
> change this attribute during some online reading I had
done but I can not
> find
> it. Can anyone here help?
>
> Dara
>

How to make floating image with dim background

hi guys, i would like to know how to make a floating image and the background will dim? like for example when you click a thumbnail, the bigger version of that image will pop up on the same page and will have a dim background? can someone point me to a tutorial? any help would be appreciated, thanks in advance!

Hi,
If you look at the tutorials in fireworks such as changing images/rolover images you will start to get an understanding.
Cheers

How to make an image of a folder.

I want to make back up my applications folder cause I have alot of stuff that if I were to lose it I wouldn't even know what to redownload or get from where ever else, when I try to transfer the folder to my external hd it takes forever because it wants to scan everything in the package contents of every app. so I want to make an image so I can transfer real quick. and I can just restore everything a little easier. is there anything I can use to do this that came in OS X or any freeware I could get?

It would actually be easier to make an archive of the folder. Just control-click the folder and select "Creat Archive of '<name of folder>'" But, if you still want to make an image, go do Disk Utility, and then click "New Image" at the top of the window. Next, you'll have to name the image, and select the size (everything other opttion can stay as it is). After you create the image, it will open and you'll have to drag your folders contents (or the folder) into the open image, then eject it. After that, your image is finished.
Zeb

How to make graphics in pdf link to real size gifs/png

This must be an old question, but when we were going to online help form Frame documents, we chose RoboHelp because we had a perl script
that would swap back the old (96ppi) screen captures in the html, and so the user would see the large GUIs clearly.
We are looking to go to an html front end that points to within the pdf documents, but the screenshots are still unclear, is there a way to have
a tooltip over each image in the pdf to click to enlarge and then the user would double-click and the original gif/png would appear? The original GUI images would be in a directory with the online help.
Thanks

That makes sense. So I guess it looks like I have 2 options.
1. Put the JS short code in and have it open the link in a new window if the user opens it in adobe. If a google chrome user opens it in the default viewer, they wont be able to use the link at all.
2. Leave the link how it is, and it will be usable in both viewers, but will not open it in a new window.
I am sureprised that opening the link in a new window isn't just an option in Acrobat Pro. I wouldn't think you'd have to make a workaround like this.
Is there an alternative way to have a page link on the form so that people can go to another .pdf whil keeping the main one open?

How to make an image a link?

Similar Messages

Maybe you are looking for