Image file links

**LIU** · 20 March 2013, 03:53 PM

Hello,

I am new to web design and I am trying to do something and I can get everything working the way I expect except the link to the image. I am using external code that will have an image in a fixed position even though I scroll the page. I will eventually add to this by having the image link but for now I will be happy just to get the image to show up. Everything is working except the image link. I read the help section on this topic and I still don’t understand what I am doing wrong, I have tried every combination to get this image to show up via using HTML under website (I am only doing a one page site). Here is the path to my image. C:\Users\Diana\Desktop\website\index_htm_files
I apologize if this does not make any sense I am VERY new to HTML

This is what I pasted for my code....
HTML Body:
<body>

<p class="pos_fixed"><img src="xr_ap" src="index_htm_files/204.png" width="100" height="140" /></p>

</body>
</html>

HTML Head:
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>

**gwpriester** · 20 March 2013, 05:04 PM

Welcome to TalkGraphics

My first question is WHY?

Put the image on your page where you want it. Web Designer will do the rest as far as coding is concerned.

Or am I missing something?

**LIU** · 20 March 2013, 06:16 PM

The html code allows scrolling and the element stays in a fixed place (upper right) so the image is static and the page scrolls behind it. I don't see a way to do that without importing the html code.

**gwpriester** · 20 March 2013, 07:21 PM

Ah, OK, I get it.

Use a placeholder. A placeholder is any object, usually a simple rectangle.

Select the rectangle then click the World icon (Website Properties) and go to the Placeholder section.

Copy and paste your body text in the Body section and the head in the Head section.

Placeholders add the HTML text to the appropriate parts of your website when you preview or publish your site.

Try this without the <BODY> </BODY> and <HEAD> </HEAD> tags since I think they are redundant.

**LIU** · 20 March 2013, 08:55 PM

OK the placeholder works, I finally figured out how locate the image. One question, is there only one placeholder allowed per page? I tried to make a rectangle and use the same code only with a different location and the program only recognized one. Another question is what is the difference between using the place holder and putting the coded on the page?

thanks for the help!

**gwpriester** · 20 March 2013, 09:34 PM

I am not sure about how many placeholders you can use. If you use a placeholder the code is inserted into your HTML document each time you publish or preview your site. If you manually edit your HTML document then the next time you publish your document the code will need to be reinserted.

One thing you can try with the placeholder is if you want to reference two more more images, just add these to the existing placeholder. If the <head> text does not change then leave it as it is.

Have a go and report back.

**LIU** · 20 March 2013, 09:56 PM

I can still only get one image to show up but I am not that familiar with html (I just copied the original code from W3schools) so I am not sure if I did it correctly.

In order for this to work in the context that I would like it to work, I would have to change the head text to reference a second fixed position.

**steve.ledger** · 20 March 2013, 10:08 PM

Can you show me what you are wanting? You have an URL which demonstrates your goal?
There are some ways to create fixed objects in Xara Designer using some tweaks (the left and right tabs tweak for example: http://xara-users.info/demos/left-ri...mple/index.htm), but I'd need to see precisely what you are wanting first.

**LIU** · 20 March 2013, 10:41 PM

Here is the link to what I am looking for. When you scroll the page the nav bar to the right stays in the same spot. I was going to do this in a step by step sort of way. First get my image to stay then add mapping to the image. I know this is a bit beyond what xara is set up for but I think I can do it. Looking forward to your thoughts!

Link

**steve.ledger** · 20 March 2013, 11:46 PM

OK, well the !FixedTab tweak will be close to what you want. (tweak is available included in the attached demo file)
The tweak is placed on the page (you can have it mostly on the pasteboard so long as it just touches the page, else it will be ignored)
This creates a new layer named !FixedTab
Any object placed on this layer will remain in that position as the page is scrolled.
No HTML or CSS editing required, just drag and drop.

What you can't do with this tweak are mouseover popups (though mouseover text links still work in the normal way)