|
HTML - Clickable Hyperlinks Underneath An Image?
I've got some hyperlinks underneath a (transparent) image. Because of this, they're not clickable. Mouse hover isn't even detected.
Is there any way round this without placing the image beneath the hyperlinks? Similar TutorialsHello, I need help aligning text underneath an image. It seems that all the info I read shows how to align at the top, middle or bottom of an image, but to the side...not underneath. Here is my code. <td><a href="images/zc_shop_hdr1_111k.jpg"><img src="images/zc_shop_hdr1_16k.jpg" alt="Zion Cycles 5rd year in business" width="290" height="193" border="0"></a>February, 2008. Now in our 5th year, we're looking forward to many, many more!</td> If there is such a code that I am looking for, where would I insert it? Thank you in advance for any help! Regina Hi, I'm pretty sure there is a simple way of doing this but I have tried and cannot get great results. I want to be able to have the lower right logo on this page be clickable to a webpage. Thanks! Hey folks, I'm having an issue with an image map, on some pages the areas I've mapped are not able to be clicked. It has something to do with the code above the image map, but I'm not sure exactly what is causing the issue. Here's the full page code: <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>DIVINEDESIGNJEWELRY.COM</title> </head> <body> <p align="center"> <img id="Image-Maps_1201007190938159" src="DD_Logo.jpg" usemap="#Image-Maps_1201007190938159" border="0" width="725" height="235" alt="" /> <map id="_Image-Maps_1201007190938159" name="Image-Maps_1201007190938159"> <area shape="rect" coords="6,179,105,215" href="http://www.divinedesignsjewelry.com/philosophy.htm" alt="" title="" /> <area shape="rect" coords="118,180,217,216" href="http://www.divinedesignsjewelry.com/givingback.htm" alt="" title="" /> <area shape="rect" coords="226,179,325,215" href="http://www.divinedesignsjewelry.com/collections.htm" alt="" title="" /> <area shape="rect" coords="331,180,416,216" href="http://www.divinedesignsjewelry.com/artisans.htm" alt="" title="" /> <area shape="rect" coords="420,180,500,216" href="http://www.divinedesignsjewelry.com/events.htm" alt="" title="" /> <area shape="rect" coords="506,180,586,216" href="http://www.divinedesignsjewelry.com/boutique.htm" alt="" title="" /> <area shape="rect" coords="602,179,700,215" href="http://www.divinedesignsjewelry.com/mailinglist.htm" alt="" title="" /> </map> </p> <div align="center"> <table border="1" width="57%" cellspacing="0" bordercolor="#DADADA"> <td> <p class="MsoNormal"><font color="#808080" face="Verdana"><b><u>EVENTS</u></b></font></p> <p class="MsoNormal"><font face="Verdana"><font color="#808080">Visit Divine Designs in Louisville, KY, September 12<sup>th</sup>-18th at </font> <a style="color: #808080; text-decoration: underline; text-underline: single" href="http://www.natqc.org/"> www.natqc.org</a></font></td> </table> <div> <p align=center> <img id="Image-Maps_1201007190938159" src="bottommenu.jpg" usemap="#Image-Maps_1201007190938159" border="0" width="710" height="46" alt="" /> <map id="_Image-Maps_1201007190938159" name="Image-Maps_1201007190938159"> <area shape="rect" coords="503,2,569,41" href="http://www.divinedesignsjewelry.com/press.htm" alt="" title="" /> <area shape="rect" coords="584,2,670,41" href="http://www.divinedesignsjewelry.com/contactus.htm" alt="" title="" /> </map></p></div> </body> </html> Any help would be greatly appreciated. The image map on the top works fine, the one on the bottom is the one that is not working at all. Thank you! http://www.grannysoycandles.com The menu links on the left side are working in IE but not in FF. Its only when they are in the "buttons" div. I put one in the "body" div and it worked fine. Any ideas why? Internet Explorer works fine Firefox does not weird...usually its the other way around... Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Granny Soy Candles</title> <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" /> <style type="text/css"> :active, :focus{ outline:none; } </style> </head> <body bgcolor=#E0E0E0> <div id="div1"> <div id="banner"> <img src="http://www.grannysoycandles.com/images/banner.jpg"> </div> </div> <div id="div2"> <div id="body"> <center><b><h3>Welcome To Granny Soy Candles</h3></b></center> Welcome to the new home of Granny Soy Candles. Please be patient while the site is updated and created. We will be up and running within the next few weeks. Very soon we will be providing you with quality soy candles that are better for your home and your family. Please come back and visit us soon! <br> </div> <div id="buttons"> <a href="http://www.grannysoycandles.com/"><img src="http://www.grannysoycandles.com/images/home1.jpg" border="0"></a> <br> <a href="http://www.grannysoycandles.com/candles.html"><img src="http://www.grannysoycandles.com/images/candles0.jpg" border="0"></a> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> <img src="http://www.grannysoycandles.com/images/button0.jpg" border="0"> <br> </div> <div id="div3"> </div> </body> </html> Quote: #div1 { background: url(images/bgheader.jpg) repeat-x; float: left; width: 915px; height: 165px; } #div2 { background: url(images/bgmiddle.jpg); background-repeat: repeat; float: left; width: 915px; } #div3 { background: url(images/bgfooter.jpg) repeat-x; float: left; width: 915px; height: 51px; } #banner { padding-top: 30px; padding-left: 1px; } #buttons { padding-top: 30px; } #body { position: absolute; width: 675px; padding-left: 220px; padding-top: 15px; } Hi guys! I'm having issues getting a <li> element clickable. It only makes the text inside the <li> element clickable. i would like the whole <li> div to be clickable (so that if i click on the background image, it clicks, and not only if i click the text) I have the following HTML-code: Code:
<ul>
<li1><a href="index.html">THISisTHEtextTHATgetsLINKED</a></li1>
</ul>
And it is uses this CSS code: Code: ul {
display:block;
padding-left: 0;
padding-right: 0;
margin: 0px 0px;
list-style-type:none;
}
ul li1 {
margin: 0px 0px;
height: 35px;
width: 170px;
display: block;
float:left;
text-align: center;
background-image:url(../pictures/hjemknapp.png)
}
can you guys please help me? It works in my editor, but when I paste it into my blogger account, it says its not complete because of the IMG tag. <A HREF="http://www.trueprotein.com/"><IMG SRC="http://i10.tinypic.com/4tqy6ux.jpg"</A> Thanks Hiya, I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs. This is example of what I mean: Thanks Hi all, I'm trying to make my background (which contains my logo and site name) to be clickable to my site's URL. Seem to be having difficulty because I am using a modified WordPress template along with linking to a stylesheet. Not very good or familiar with php and css, unfortunately. Anyone have some energy to crank this one out with me? sorry for being vague in my initial post. Here is the header php code: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>[TITLE]</title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> </head> Here is the css code: .header{margin:20px 0;} .header .top{background:url(images/logo-graphic.jpg) top left no-repeat; height:120px; width:960px; margin:20px auto;} .header .top #secondary{float:right; width:468px; height:60px; margin:20px 0 0 0; border:1px solid red;} .header .navigation{background:url(images/navigation-bar-bg.png) top left repeat-x; height:61px;} .header .navigation .nav-wrapper{width:960px; margin:0 auto; height:49px;} .header #searchform{float:right; width:325px; height:40px; margin-top:6px;} .header #searchform #s{font-size:14px; padding:6px 4px; border:1px solid #666; outline:none; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; -moz-box-shadow: inset 0px 1px 3px #888;-webkit-box-shadow: inset 0px 1px 3px #888;box-shadow: inset 0px 1px 3px #888; } Hello all, I am so stuck , after spending all of last night reading and crawling across google to find coding for my problem, I am still so lost! Basically, I have a webpage which is going to have lots of small clickable images on it, and each image is going to be linked to bring up a pop up window that opens up full screen (without scroll bars, no searchbar, etc, just a window thats resizeable), which will have the image click on as a larger view. I know this is javascript coding, but each time I found solutions across the net, it was usually only for if the page had one image that was going to be made larger. If you click on this site, this shows what I'm after (and click on one of the little images).... any ideas??? Hey, I am using tables to create a layout in dreamweaver. The layout appears fine in the design view with Dreamweaver, but when viewed in Explorer all the tables appear side by side, instead one under the other. I have tried <p> and <br> between the tables, but no effect, still side by side in explorer. Not sure why this is happening. thanks in advance for your assistance, illusion Can I use the (now deprecated) align attribute to do this ....? For the sake of simplicity, say I have 3 paragraphs of text. I want the first placed above an image, the 2nd next to it, and the 3rd below it. I can get the text to the left or right of the image, but when I resize the window, the 3rd paragraph can crawl upwards, and then appear right next to the image. I want to force the text placement as I described above. Thanks Howdy y'all, this is my first post =) I'm not usually a web designer, however I'm currently working on a web site for a small thrift store which benefits Habitat for Humanity. Of course, in HfH style, I am going with a green/blue color scheme. Here's my problem: I have hyperlinks, so that the underline is blue, and turns green when hovered over. It works great and looks just dandy with text hyperlinks. Here is the style code I inserted into the head: Quote: <style> body { color: black; background-color: white; font-family: arial } a { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px } a:link { border-bottom-color: #000080 } a:visited { border-bottom-color: #000080 } a:hover { border-bottom-color: #008000 } a:active { border-bottom-color: #008000 } </style> Now, here's the problem: Having this code in my header, is also causing all IMAGE hyperlinks to be underlined as well, with the same effect. This does not look so good. I tried inserting text-decoration: none into the image hyperlink tags, with no effect. What I would like to know is, how can I have the changing underline effect on text hyperlinks, while leaving image hyperlinks without an underline? Hi.. i am not sure if you can do this in HTML..maybe someone knows if there is some way around this.. In my webpage, I have a hyperlink which I want to point to a pdf document which can be at 2 different places on the web. I want the hyperlink to work in any case even if one of them is not present. I do not want to put something like Link1 and Link2 on the webpage. I want to hide both the links in the HTML... wonder if someone can help me with this.. skhimsara Hi there, question about the hyperlinks at the top of most web pages. Like this page there are links such as HOME, ADVERTISE, CONTACT then REGISTER, PROFILE etc. I thought they could be a table cell but looking at the "Source" of this page they are something like this: <ul id="subnav"> <li><a href="http://www.htmlforums.com"><img src="style1/images/misc/but_home.gif" width="30" height="15" alt="Home" title="Home" /></a></li> What is the name of that element so that I can search my books and web for solution. I would call them just "Links at the top of the page" but I am sure there is more scinetific name for it. Hi I have a basic form that has some radio buttons in it (in a group). In the radio button labels, I'd like to have some hyperlinks that open examples pages pertaining to what the radio button choice is. I don't want the links sent with the form - I just want to have them displayed for the user to click. Where would I put a link in the radio button group code without screwing up the form? Thanks for your time and help. Shaun Hello everybody, maybe someone can give me a helpful advice here.. I have a vertical menu comprising of single image links on my website, each linking to a subsection. The menu is in the left frame of a frameset, the subsections (displaying in the main frame) can be quite big, containing up to twenty pages. Now I would like to add a small arrow or the like aside of the active link in the left frame - i.e. when a user clicks on the link image the arrow appears and stays there until the user clicks another link. That way, the link would stay highlighted/marked as long as the user is in the specific section. The problem is to make the arrow stay as long as nothing else is clicked in that frame - but disappear when another link is clicked to show up aside that one then. Can this be done with CSS?? Or rather javascript? How would I do this? Many thanks, Yatkha Good Day and Happy New Year. I am told that MS Frontpage cannot follow or resolve the links set up via JS scripts. That is, FP cannot check for broken or invalid links embedded in a sript. To demonstrate, I've got the following construct: <a onclick="OpenWindow('target.html');" href="javascript:void(0);"> any text </a> OpenWindow () is a JS script which opens the target page with few additional features. How can I automatically verify the links? Thank you for your help. Saeed This page that I am working on has been headache stop after headache stop. I have put a ton of time into it to try and make it perfect. It feels like two steps forward one step back and more even sometimes. But over all its been a very rewarding experience building this page from nothing to this. http://www.mvguild.com Right now the issue Im looking to try and fix is where a hyperlink is directing its target to. I want it to go to the frame to the right, so you can still see the navigation frame that is at the left in which you clicked from in the first place. It is not doing this. I tried a bunch of different target choices which leads me to believe that Im lookin gin the wrong place. Would someone take a look at it for me please? The first button in question is -----> Recruitment... <---- there are a couple of other active links on the page but them opening in completey new windows really doesnt bother me too much. There is also an issue with the graphic in the upper left corner when you click on it it uses the left frame to go to its new page, its not supposed to do that, and I couldnt figure out how to fix that either. The names of the pages that Im currently working with are called: index.html <---hidden frame navigation.html <---left frame current.html <---frame in the middle(or right) that I want to cycle through with link clicks application.html <---- the first page Ive tried to put where current.html lives Thank you for your help Im sure its just a matter of a target="_figureitoutven Oh and if you had any suggestions for the site I am open to hearing them My guildmates seem to be mute when I ask them. hello am trying to put hyperlinks inside a table & cannot get it to work properly. the links need to jump to sections within the same page. not suppose to be this difficult. have most of the coding but they still do not jump to the articles. here is an example from a page at http://www.freewebs.com/awordfitlyspoken/11aaaaaa.htm this is a 'test page' for the html that I am trying to do: ========================= body onload="runSlideShow()"> <center> <table border="5" bordercolor="C0C0C0" bgcolor="FAFAFA" cellpadding="20" cellspacing="5"> <tr> <td id="VU" height=80 width=730> <img src="http://farm1.static.flickr.com/48/192627152_a279d7abe1_m.jpg" name='SlideShow' width=150 height=130 align="right"><font color=414141><font size=4><b><blink>Salavation - Featured Articles</blink></b></font> <p><font size=2> <li><a href="#1LOCATION" style="text-decoration:none"><font color=#414141>Religions: Fradulent But Necessary</a> by Bill Allin</li> <li><a href="#2LOCATION" style="text-decoration:none"><font color=#414141>Called to Exploit or Follow?</a> by Fred London</li> <li><a href="#3LOCATION" style="text-decoration:none"><font color=#414141>Levite Be Gone: Releasing the Samaritan Within</a> by Jason S. Miller</li> <li><a href="#4LOCATION" style="text-decoration:none"><font color=#414141>Which Tree</a> by Jeremy Chambers</li> <li><a href="#5LOCATION" style="text-decoration:none"><font color=#414141>Editorial</a> by C.L. Mareydt</li></p> </td> </tr> </table> =================== the target area within the same page I have coded - but it doesn't connect. It constantly throws me to an 'error page'. here is the target area coded as such: <br><br> <br><br> <img src="http://farm3.static.flickr.com/2334/2157882981_ab63474c94.jpg" width="125" height="150"> <br><br> <font face="arial"><font size=4><b><a name="1LOCATION">Religions: Fraudulent But Necessary</a><br>by Bill Allin</b></font size> <br><br><p> <span style="float:left;color:#414141;font-size:100px;line-height:70px;padding-top:2px;font-family: Times, serif, Georgia;">Y</span><p> ou can safely assume that you've created God in your own image when it turns out that God hates all the same people you do. - Anne Lamott, writer (1954- ) All religions are man-made. Every single one, whether it has many gods, one god or no god at all, was a creation of man. There is no evidence that God ever sanctioned any one religion. Almost every religion - even those of aboriginals - has at least one god. Though there are hundreds of religions in existence today, no two have identical concepts ... </p> <br><br><a href="http://www.freewebs.com/awordfitlyspoken/11allin.htm" STYLE="TEXT-DECORATION: NONE"><img src="http://www.freewebs.com/awordfitlyspoken/clickbutton.jpg"></a></font> =================== would anyone know what i am doing incorrectly. sorry to take up so much room ... but really need a definite answer. thank you so much. C.L. All, i have a minor problem with hyperlinks not displaying properly. In some instances, IE7 does not underline the hyperlink or only partly underlines the link. Please see http://www.tauntonflowershow.co.uk/ and look at the downloads yellow box at the top of the screen. Firefox, Opera etc are all OK. Grateful for any advice you can offer. |
|||||||