HTML - Absolute Link To Images Disappearing
I've been building web pages for lots of years but never came across this problem until recently and can't figure it out.
I usually use the absolute url link to an image on a web page but recently I'd upload a page and no image would appear. Upon viewing the source of the uploaded page I'd see that where I'd written: <img src="http://www.domain.com/pics/image.jpg"> but what appeared on the uploaded page was: <!-- --> IF I re-write it and write a relative url intead such as: <img src="/pics/image.jpg"> then the same image will appear. I checked with my host if there were any changes in the server, no. I checked this in IE and in FireFox, same. I upgraded both browsers, same. Any ideas? Here's a sample page where there is actually an image link on the page but when I view it the image disappears: http://www.southernutahland.com/landtosell.html Thanks! Similar TutorialsI'm new here so forgive me if I've posted in the wrong place. I'm working with HTML. My goal is to use an image as a link but I also need to use absolute positioning for the image as well. Is there a code that combines absolute positioning of an image where the image is also a link? I've attempted to combine : <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="---THE URL OF MY HOSTED IMAGE---"> with: <p align="center"><a href="---the URL of the link---" class="fw_link_page"></p> But I simply don't know how to do this. Any assistance would be greatly appreciated. I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag. Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do. Is there a way to setup a link to download (or offer to download with the open/save box) a jpeg rather than display it in the browser? On my site I am trying to have 2 separate images load randomly, that part I have figured out, however, each image is actually a 2 sided banner with a link on each side, as of right now I am using the code below link each image to a single page, however, I need to map 2 different links on the image and I'm unsure how I should edit the code to do that: function showImage(){ if(whichImage==0){ document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=645 height=125></a>'); } else if(whichImage==1){ document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=645 height=125></a>'); } else if(whichImage==2){ document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=645 height=125></a>'); } else if(whichImage==3){ document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=645 height=125></a>'); } else if(whichImage==4){ document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=645 height=125></a>'); } } </script> I have had this problem on almost all the websites I've made and I'm too picky to let it go... When I make the navigation images/buttons for a website, I set the border to zero as usual and link each image to its respective page. But, when I click on the image to take me where it's supposed to, this pesky dotted border appears around the edge of the image after it has been clicked and it remains there until I click on something else on that page. (This also happens to text links when clicked, but I'm not too worried about the text links.) For the websites I've made that go to an entirely new page after an image link is clicked, the dotted line appears around the linked image after it's clicked and before the next page has loaded, but then after the new page loads the dotted line is gone. But, for websites I have built that utilize frames, because the new page that loads is in an iframe, and because the page the navigation buttons are located on never changes, the dotted border stays around the image after its been clicked and, like I mentioned earlier, doesn't go away until I click on something else on that same page. An example of this can be seen when you click the images in the navigation column along the left side of a website I built located at the following URL: http://www.djprogress1.com/ This border problem could be specific to my website browser (I use Firefox), but I am not sure. And the border could be added entirely by the browser and there may be no way to get rid of it through coding, but again, I am not sure of this. So, does anyone know if anything can be done to fix this or am I stuck with these dotted borders? Thanks, Jase Can someone look at this page for me: http://www.usautomatedshade.com/ There is supposed to be a blue-and-yellow div below the menu that shows up and then disappears. Any idea why it is disappearing? Thanks!! I don't know if it's just my browser (Firefox) acting funny or what, but for some reason this piece of code...
Code: <table bordercolor="#000000" width="146" height="45" border="1" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000"><font face="Verdana" color="#FFFFFF" size="3">Join the</font><br><font face="Verdana" color="#990000" size="3"><b>Red Riot</b></font><br><font face="Verdana" color="#FFFFFF" size="3">on</font> </font></td></tr></table> <a href="http://niu.facebook.com/group.php?gid=2204682424" target="_blank"><img src="http://img239.imageshack.us/img239/1539/redriotonfacebookcw5.jpg"></img></a> </div> ... looks like this... Code: <table bordercolor="#000000" width="146" height="45" border="1" cellpadding="0" cellspacing="0"> <tr><td align=center valign="middle" bgcolor="#000000"><font face="Verdana" color="#FFFFFF" size="3">Join the</font><br><font face="Verdana" color="#990000" size="3"><b>Red Riot</b></font><br><font face="Verdana" color="#FFFFFF" size="3">on</font> </font></td></tr></table> <a href="http://niu.facebook.com/group.php?gid=2204682424" target="_blank"> </img></a> </div> ...after i upload the entire document file to my website. It omits this piece of code (which displays an image) Code: <img src="http://img239.imageshack.us/img239/1539/redriotonfacebookcw5.jpg"> ... in the final product. Here is my website: http://www.niufans.com/cpg/albums/Re...Red%20Riot.htm What am i doing wrong? In Dreamweaver it shows up like it's supposed to. Thanks! Let me first off say I am very new to HTMl. I know a bit, and what I do know I use, but I leave plenty of it to Dreamweaver. Now, I'm starting a Nintendo News site,(with someone else)And it's almost ready; but just as I'm adding picture buttons, and links, and all that to get it to work together, it two of the pages disappear. When I say that, I mean, there is nothing there when I open the page. It's all displayed in Dreamweaver normally, but when previewed, it's blank. This needs to be fixed as soon as possible. I have determined it is a problem with the HTML, not where it's saved or the host. So I come here, to you good people. The site doesn't have an actual domain name; it's using a free .co.nr redirect CURRENTLY. We plan to get name soon enough. Anyways, main page= www.nsidernewspaper.co.nr The Reports page, and the Reviews page are both malfunctioning. I'm new to here, so I'm not sure how I should post the HTML for you to review, or maybe you just have seen this happen before, or know of a possible solution . . . whatever, I hope I can be helped. WiiFreak4, out. Hello all, I'm a bit new to this so please forgive my obvious mistakes... I have created a website using Dreamweaver and uploaded the pages to my hosting company - 123-reg.co.uk. The problem I am having is the code I have created in Dreamweaver for the Title tag is not showing in the code of the uploaded page. I guess the software being used to upload is altering it...? Anyway, I have tried going in to edit the uploaded page via the platform/portal 123-reg provide but although the code adds in a page title upon saving and exiting, the next time I go to view or edit the code, it is no longer there!? If I edit anything else on the page and not add that code in every time, the title will disappear when the page is next loaded in a browser...! The code I am pasting in is this: <html> <HEAD> <TITLE>INSERT TITLE TEXT HERE</TITLE> </HEAD> The rest of the code is he http://www.eveinteriors.co.uk/Children.htm Please help, it's really frustrating and 123-reg "support" are telling me it's a coding issue and they can't help....what am I doing wrong!? Any help greatly appreciated. Thanks, Pete Hi, I'm new to this forum and would like to apologize in advance for the "general" nature of this question. I am a new moderator for another Forum type website. The website has for years had no image upload feature and had users place in their posts external links to free photo hosting sites. Recently, the website added a feature to upload images directly onto their server, allowing them to be locally archived rather than remotely linked to the other photo hosting website. Now, 99.9 % of the Forum users have never purchased prints from the photo hosting site, including myself. Though the host site has never sent me any notification on my account, the older picture links on my posts have ceased to work, displaying only red X's instead. This is now beginning to happen all over the Forums, creating a slow errosion of images from the older posts. It would be ideal to create some type of program or utility to "saveas", then convert all of the older images to the new local hosting, thus eliminating the problem. This would solve the problem for the newer eternally linked images - unfortunately the older ones are probably lost. Does anyone have any ideas or sugestions on this? (I did a search but was unable to find anything) Thanks! A&N I have several links on my site, all in the form of <a href="http://www.mywebsite.com">mywebsite</a> How do I need to change it such that a new instance of the browser is used in which the linked site is displayed. Hi guys, I'm a newb here, and I'm trying to create a table with a fixed position like this one http://www.adachiu.me/ I have made one, but if I resize the window it will move into the table and look all wrong. This website that I have provided does not do that; it will go up and down with the page when you scroll, and if you resize than it will not move into the table. Does anybody know how to fix this? Thanks Sean First off, hello, this is my first post. Here is the code im using, which works great until i minimize the page. Seems like the shoutbox doesnt minimize with the rest of the page and it actually stays at position,I know i know thats why its called absolute. But how can i get my html code boxes to minimize and configure properly with the rest of the page? Thx for any help Code: <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="devilleather" src="http://www5.shoutmix.com/?devilleather" width="960" height="400" style="position:absolute; top:285px; left:350px"> frameborder="0" scrolling="auto"> <a href="http://www5.shoutmix.com/?devilleather">View shoutbox</a> </iframe> <!-- End ShoutMix --> Hello everyone, I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page. But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code. And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0). -------------------------------------------------------------------------------------------------------- <i class=i> <a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i> </td></tr></table> </td></tr></table> </td></tr></table> <div class="myDClassFC"> <table><tr><td> <table class="off"><tr><td> <table><tr><td> <style> .i {display:none;} div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden} </style> <i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i> ----------------------------------------------------------------------------------------------------- Well I appreciate everyones thought. could someone please help me out! I just need this flash code <embed allowScriptAccess="never" src="http://www.amarasoftware.com/slideshow.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"> </embed> to have an absoulte postion on it... thank you. I would greatlly appreciate your help Dear Forum Readers, I do not know how this whole forum thing works, and I probably will not be using it much. But I have a very important question to ask you all. If anyone knows, please help me. I searched high and low for a code to place a picture anywhere (out side of the tables) and I finally decided to just use one of the codes that MySpace help pages uses to post banners on your page when you have used their site for codes; and it worked beautifully, the only thing is it will only work on the left side. Here is a link to my page so you can see what I am talking about. MySpace.com/chippycheekschik. The roses on the left, I also want on the right. Will someone kindly help me...I would really appreciate it...:-) My E-Mail is Steph_A_Rios@yahoo.com or AIM SN is ChippyCheeksChik. You may also leave me a message on my MySpace, comment or personal, either will do. PLEASE contact me if anyone has a solution. Thank you so much. Sincerely, Steph R. Hi, I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here http://www.dublinbynumbers.com/troubleshooter.html instead of here http://www.dublinbynumbers.com/categories/cinemas The solution should work in both IE/FF and any screen resolution. Thanks in advance for your help, Sorin Hi, I'm newly registered and seeking some assistance. I'm working on a website for a client and come across an issue. The following is my iFrame code: Code: <div id="iframez"> <iframe src="main.html" width="100%" height="400px" name="framez"></iframe> </div> I have a link that is at the bottom of the page that is supposed to load in the iFrame when clicked upon. The code is as follows: Code: <a href="somelink.html" target="framez">some link</a> What I want is when the link is clicked that it loads in the iframe (this works as intended) AND I want the page to scroll up to the iframe. I tried doing this without success: Code: <a href="somelink.html#iframez" target="framez">some link</a> This is interpreted as #iframez in somelink.html, and not the page its on. Is there any way around this? Thanks for your patience. |