|
HTML - Image Disappears When Made Into Hyperlink
Hello everyone,
I have an image inside a div, when I try to make the image a clickable hyperlink the image disappears and there is nothing to click or see. Code: <div id="google"> <a href="http://www.google.com/"> <img src="google_icon.png" height="23" width="23" /> </a> </div> I tried an alternative way by making the Div a hyperlink with the following code... Code: <div id="google" class="hand" onclick="location.href='http://www.google.com';" target="_blank"> <img src="google_icon.png" title="google" height="23" width="23" /> </div> This works except for a couple problems...1st when hovering over the link nothing is shown in the browser status bar and 2nd, the target="_blank" isn't working. Here is a link to my site http://chasehearn.com/ On the left hand side there are 6 images (one is not showing) which i would like to make links. I made the first (from the left) one work by making the Div that contains the image a link, but I can't get the link to open in a new window and I don't like how the browser (i'm using chrome) status bar doesn't show anything when hovering over the link. The 2nd icon (which can't be seen) disappears whenever I add <a href></a> tags around it. The images are in the correct folder. Anyone have any ideas on what I'm doing wrong? Thanks! Similar TutorialsHi, I run an online music website, http://obscurealbums.com At the end of my last post, I decided to put some buttons with links to Amazon US and UK stores, and everything works fine. However, if you click on the post's title (so clicking on the individual post) the images are replaced by the alt text and the Amazon US is strikethrough. How can I get around this? If you need any more details, please let me know - I'm an HTML novice... Thanks for your time. Dear I made an html newsletter with dreamweaver and I used the swap image behavior. I can view the result perfectly in explorer. Now I mailed it to my own mailbox (via explorer) and in outlook (and also in hotmail) the swap image effect doesn't appear.(the second photo is not shown) Is there a possibility to see this in my mailbox? I tried to paste the code into my outlook, but that doesn't work with the regular outlook, I only can view the source, not edit it. Thank you very much in advance! Kind regards Sandra Hi All, Possibly a double question here. On the main page of my website I plan to put an image (jpg or bmp) of the province divided into the three zones representing our organization. My intent is to set it up so that if your mouse goes over one of the zones, it will become hilighted and if you click it will link you to the website for that zone. So the question becomes: A) Do I need to create the image as 3 separate images or just one image? If 3 images how do I tell it to display correctly? B) How do I do the rollover with link? Hi, I have a large image on my website. I need to make a small area of it clickable with a hyperlink. How can I do this without cutting the image up. I thought about putting a transparent image on the area I want hyperlinked. Are there any easier ways? thanks Hi can anyone help me with hyperlinking this group of images to the same url and so that they dont have a border. This is my site www.freewebs.com/out-and-out The images are the ones under 'team roster' on the index page. i have tried a few things but the images keep going missing. Code: <tr> <td> <div class="content"> <center> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <br /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> <img src="./images/thumb_hover.jpg" alt="" /> <img src="./images/thumb.jpg" alt="" /> </center> </div> </td> </tr> Hi i am new to HTML and have a really basic question. I am trying to teach myself HTML from scratch and came across adding a hyperlink to an image. i found this HTML below on a practice web site and undestand that the <a href="default.asp"> is where the hyperlink links to, but when i changed this to a website for example www.google.com it didn't go to the google page it just said error why is this? Also the "smiley.gif" where does this come from if i wanted to change the picture that you click on how would i do this ?? I'd be so grateful if anybody could shed some light on this for me thank you, Angela <p>No border around the image, but still a link: <a href="default.asp"> <img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" /> </a></p> Hi, I am putting an hyperlink to a graphic and addional to this an alternate text on it. The link works well opening the webpage in a new window but when I put the mouse over the image I don't see the alt text <A HREF="http://www.selfgrowth.com/"target="_blank"><img src="Growing.jpg" border=0 height="100" width="110" alt="Believe in Yourself"/></A> could you help me please Thanks In restyling my website, I've decided to use more icons for links than I previously have done. However, rather than have text above each icon to explain what it does, i'd rather have a tooltip type alternate text feature that describes the link as the user hovers over it. Problem is, I can't get it to work. My code is below: <a href="startthread.php"><img src="IMAGES/newthreadicon.jpg" alt="start a new thread" /></a> When I hover over it, nothing happens although the link works fine. Is there something wrong with my code or could it be my browser settings? Here's a link to the website if you're interested: http://www.mannyroadend.co.uk/messageboard2010.php - Its a work in progress - i'm developing new pages live with the suffix '2010' so some of the links may not work properly or may re-direct you back to the current site. Thanks. I've never had this problem before but I uploaded a lot of images and put them in a gallery using an image hyperlink with thel image being a thumbnail and the link being the larger image. The problem is when I click the thumbnail the larger image has this white background around it. Is there anyway to fix this? or What am I doing wrong? my code looks like this <a href="http://www.eccentrix.com/members/carmellady/portfolio/DSC0006.jpg" target="http://www.eccentrix.com/members/carmellady/IFRAMEURL2.html" border="0"> <img src="http://www.eccentrix.com/members/carmellady/Thumbnails/06TH.jpg" HEIGHT="20" WIDTH="20" border=0></a> Hello. I'm putting together my first website, and trying to learn HTML basics. One specific problem I'm having is getting an image hyperlink to refresh my web page, rather than opening a new browser tab/window. For example, the code I'm using is... <a href="http://mywebsite.com" target="_blank"><img src="http://mywebsite.com/image.jpg" border="0" alt="My website"></a> When a visiter clicks on the image, a new browser tab/window opens. I want the page to refresh, instead. Can someone provide me with a solution? Thank you. For some reason this page refuses to work as it should... Simplified it as much as possible, but for some reason the "PriiceGuide" page pops up about 600px to the left out of nowhere. I also need to know how to advance a page (like Photopage1.html is the 1st page in the iframe, then when they click the arrow it goes to photopage2.html) I've got it done oldschool but need a way w/o messing it up. Just need it to go forward/backwards properly according to which arrow they hit. The site is WWW.CDI-IMAGING.COM/DAYLILY.HTML Thanks a lot! I cannot remember if floating div's that have a width specified can be made to collapse if the user shrinks the size of the window as in http://www.toddcary.com/test/viewpoi...ew_design.html Also, can the movement of the floating box be prevented from moving below the other if the window is shrunk? Todd I integrated my website's layout with my forum just by editing the forum's main template. I'm not awfully good with tags etc. Just wondered if someone could please take a look and tell me what is causing the gap at the top and bottom of the page. I want no margin at all, so the top and bottom of the layout is tight on the top of the page. Can't see anything obvious. That's how the rest of the layout is (the fanfic page is the only one up, so click on that to see how the layout should be) http://www.billfans.com/forum/ Thanks god guys i didn't know where to turn to so i hoping you guys will be able to help, i just start using godaddy today. well everything was going great but when i tried to add a contact form it was crazy. so i look and found one offered threw godaddy and i got it on the site but could not figure out where to sick my e-mail to receive the message and how to change the subject of the e-mail but i looked threw the html and couldn't find out anything i changed stuff over and over and still nothing so here is the code HTML Code: <form labelid="formLabel_ContactForm" method="post" action="%wstx.formmailerurl%" name="Contact Form" id="wstForm_Contact"> <table cellspacing="1" cellpadding="5" border="1" bgcolor="#ffffff" width="100%"> <tbody> <tr bgcolor="#efefef"> <td align="center" style="font-family: verdana,arial,helvetica,sans-serif; font-size: 8pt; color: rgb(0, 0, 0); text-decoration: none; font-weight: normal;"> <table cellspacing="0" cellpadding="3" border="0" width="90%"> <tbody> <tr> <td align="center" style="font-family: arial,helvetica,sans-serif; font-size: 12pt; font-weight: bold;"><span controlid="wstForm_Contact" id="formLabel_ContactForm">Contact Us!</span><br /> </td> </tr> <tr> <td style="font-family: verdana,arial,helvetica,sans-serif; font-size: 8pt; color: rgb(0, 0, 0); text-decoration: none; font-weight: normal; padding-bottom: 10px;"> <p align="justify">Thanks For Your Questions,Comments & Concerns, We Will Be In Touch As Soon As Possible.</p> </td> </tr> </tbody> </table> <table cellspacing="1" cellpadding="3" border="0" bgcolor="#ffffff" width="90%"> <tbody> <tr bgcolor="#e6e6e6"> <td style="font-size: 8pt; text-align: left;"><span controlid="formElement_First" id="formLabel_First">First Name:</span></td> <td style="font-size: 8pt; text-align: left;"><input labelid="formLabel_First" name="First Name" id="formElement_First" /></td> </tr> <tr bgcolor="#e6e6e6"> <td style="font-size: 8pt; text-align: left;"><span controlid="formElement_Last" id="formLabel_Last">Last Name:</span></td> <td style="font-size: 8pt; text-align: left;"><input labelid="formLabel_Last" name="Last Name" id="formElement_Last" /></td> </tr> <tr bgcolor="#e6e6e6"> <td style="font-size: 8pt; text-align: left;"><span controlid="formElement_City" id="formLabel_City">City:</span></td> <td style="font-size: 8pt; text-align: left;"><input labelid="formLabel_City" name="City" id="formElement_City" /></td> </tr> <tr bgcolor="#e6e6e6"> <td style="font-size: 8pt; text-align: left;"><span controlid="formElement_Email" id="formLabel_Email">Email:</span></td> <td style="font-size: 8pt; text-align: left;"><input labelid="formLabel_Email" name="Email" id="formElement_Email" /></td> </tr> <tr bgcolor="#e6e6e6"> <td style="font-size: 8pt; text-align: left;"><span controlid="formElement_Comments" id="formLabel_Comments">Comments:</span></td> <td style="font-size: 8pt; text-align: left;"><textarea labelid="formLabel_Comments" style="width: 100%;" cols="38" rows="4" name="Comments" id="formElement_Comments">Enter comments here!</textarea></td> </tr> </tbody> </table> <p><input type="submit" onclick="return wstxSubmitForm(this);" value="Submit" id="wstForm_Contact_Submit" /> <input type="reset" value="Reset" id="wstForm_Contact_Reset" /></p> </td> </tr> </tbody> </table> <input type="hidden" value="Contact Form." name="FormMailerSubject" id="FormMailerSubject" /><input type="hidden" value="%wstx.project.BaseUrl%" name="FormMailerRedirect" id="FormMailerRedirect" /> </form> please help Thanks Vaughn I had this question for anyone in this forum who has time. I am attempting to make a pop-up menu in dreamweaver and have done everythign as correctly as I can, yet no pop-up menu appears... what am I doing wrong? I have made them in exactly the same fashion before and they worked fine... any ideas? I've added the mm_menu.js file to my main server space. http://www.skyjacobs.com/favorites-page2.html This is where it should pop-up on the left 'photography' button... page 1, page 2, etc. 'View source code' if that helps. Thanks for anyones assistance. Desierto I was trying to deconstruct the way this web page was made: http://www.ichartist.com/index.php I'm mostly interested in the top dark part with a gradient. Somehow it is resized with the window and if I save that page it disappears. Any ideas? Is it good to organize a website using tables? I'm beginning to word on a website that used tables to organize everything. What's your opinion on it? In this code I'm using, on the index page is a log-in box. Once a user logs in the log-in box disappears and the container below the log-in box moves up to the log-in box spot. The reason I want to change this is that it leaves a blank space below the moved-up container. Can this code below be changed to, instead of the log-in box disappearing, it is replaced by an equal sized text box, thereby not allowing the below container(news flash) to move up? Any help will be appreciated. Thanks. Code: <!--Begin Right Column-->
<div id="column-right-1">
<!--Begin Login Box-->
<div id="login-box">
<!--[onload_300;block=div;when [var.show_login_box]=1;comm]-->
<form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
<ul>
<li><label><font class="font4_13">[var.lang_user_name]:</font></label><span class="username"><input type="text" name="user_name_login" size="16" style="width:138px;" /></span></li>
<li> </li>
<li><label><font class="font4_13">[var.lang_password]:</font></label><span class="password"><input type="password" name="password_login" size="16" style="width:138px;" /></span></li>
<li> </li>
<li>
<input type="submit" value="[var.lang_login_now]" class="button-form" />
</li>
<li> </li>
<li>
<a href="login.php">[ [var.lang_password_reminder] ]</a> <b>|</b> <a href="[var.register_menu_link]">[ [var.lang_register_today] ]</a>
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</li>
</ul>
</form>
</div>
<!--End Login Box-->
<!--Begin News Flash-->
<div class="header-narrow">Welcome</div>
<div class="container-narrow">
This is for your content.Lorem ipsum
adipisicing elit, sed do eiusmod
ut labore et dolore magna aliqua
<ul class="content-list-narrow">
<li><!--[var.newsflash;htmlconv=no;comm]--></li>
</ul>
</div>
<div class="container-narrow-bottom"></div>
<!--End News Flash-->
</div>
<!--End Right Column-->
Hi all, Sorry if this has been answered already. I've done a search, and couldn't find it. I'm a copywriter who maintains his own HTML website with Notepad. But I'm very ignorant of CSS use. In other words I know enough HTML to get myself into trouble, but nowhere near enough to get myself out! I've just realised that the borders around the images on my portfolio page no longer display. I'm sure they used to. Here's the essence of the code: <img src="images/image.gif" border="1" style="border: gray"> But they work fine when I remove the style tag. But then they appear black, and I want them gray. I'm using some font substitution code (SiFR or something like that). Not sure if that's relevant. I've noticed it's caused some strange problems in the past. Would greatly appreciate it if someone could help. Cheers. I can't figure out why when this page is resized in IE7 the text and pictures disappear and all that is left is the background image. There is no problem with FireFox. Any suggestions? http://www.brackinsbaraz.com |
|||||||