|
HTML - Help With Image Links
Hello, I'm just starting out with html and I am taking a course.
I got this assignement to create a website that will include 9 questions, for each right answer one part of a picture(that I have sliced into 9 parts already)will appear. I was thinking something like this, it's a bit rough but you get the idea: If you get the first answer right, the first part of the 9 parts should appear, if wrong nothing would happen. The true or false text should be some kind of hyperlink. I'm really clueless of how to solve this task and I would appreciate some help, I am working in Dreamweaver CS5 for the record. Thanks. Similar TutorialsHello, im new to html. I am making a basic website and have used some images to link to my other pages. However the links do work but everytime i use them the new page opens in a new window. I have clicked the normal non-image links and they open in the same window. I would link the image links to open in the same window but i am unsure how i would do this. The code which i have used for my images is the following: <a href="http://E:\Website\ContactUs.html" target="_blank"> <img src="E:\Website\Contactusbutton.PNG"height="66" border="2"/></a> Hope someone can help, Thanks. So I made an images and I want to be able to link the image to a target Is there a way we can link the images to different targets without cutting the picture u? heres an example I have an large image with 10 different girls.. Is it possible to click each individual with a different target? Matt I have this image of 5 boxes that all should lead to a differnt link. How to I put in five different links in the specific spots? Sorry may sound like a noobish question but this is the first time I have made a site, but i have added images to my site as links but they move when the browser window is adjusted, so just wanted to know how to keep them fixed in one position. this is my site: www.d1ndesigns.com thanks Hi, I have very little coding experience, but am trying to set up a page for a friend. I'm having a bit of trouble with some of my text (some links in particular) hiding behind an image. It displays perfectly in Firefox, but is messed up in IE7. Was wondering if someone could take a look at my code and see if they can see what the problem is? http://vitalia.100webspace.net/ The only coding I've ever done was html don't know any css haven't ever used ftp or anything like that. I've just learned a bit here and there on the net while building a couple of personal pages. I tried putting in some td and tr tags but that makes my entire table disappear. *sigh* Hi there, I am not able to figure out why there are blue lines around my images on this page http://www.surveys.hottestdeals.info. If i want to get rid of them, where should i make the changes in CSS sheets? Thanks for any help. Kris 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; } This is so frustrating! I have a set of image links on the home page of my website, just like this: <a href="t-store.aspx"><img border="0" alt="Online Store" src="site/include/cssstore.gif"></a> For some reason, they don't work at all on Safari (on a Mac, no idea about Windows Safari). I don't really see what could possibly be causing that. There doesn't seem to be anything in the CSS that could cause this either, the div is just: text-align: center; float: right; width:200px; Worst comes to worst, I could make them into text (which might have been the right thing to do from the beginning), but now I just want to figure this out! Any ideas? EDIT: Text links didn't work either, but other links on the page do. Is there something that would make links not work in one div on a page? Hi, I'm hoping you guys can help me. I'm very new to all this so i apologize if my questions seem dumb. I'm starting a new business and selling on Ebay. Instead of doing all my listing in HTML code I'm doing it on Photoshop, then hosting it on Photobucket and then putting the HTML code for it in the Ebay HTML code box etc. This is all fine and works. I'm doing it this way as I know what I'm doing with Photoshop but don't have a clue with HTML tbh. I also need to get it all up and running asap. The problem is I want live links on my listing so that when the text is clicked on, it will take customers to my website, other products etc. Obviously i cant embed the HTML code for the links as its just a jpeg hosted image. Does anyone know a way I can somehow overlay the links over the image using HTML in the Ebay HTML code box? Is there some kind of code to overlay the text over the image, position it accurately and as a live link? Any help or guidance would be really appreciated. Thanks, Chris. Hi there, I have a problem with two pages on my website; the right-nav images are not working (in IE7). I have checked the links in the code and they are set up correctly, however the links seem inactive once tested. They do work fine in Firefox. The links are nested in a table, that is inside another (main) table, and they are not set as background images for the cell. Please see http://www.centralbancmtg.com/test/contact.html to see what I am talking about. The links that do not work are the "Mortgage Brokers - Click Here", "Today's HOT Programs" and "Employee Login" located on the right column. The follwoing link has the same problem: "Todays' HOT Programs" (first 2/3rds of the image are not "clickable") on: http://www.centralbancmtg.com/test/brokers.html I am not an expert and need help immediately. I'm sure it's an easy fix but if you have a solution please let me know ASAP! Thank you! Well title says it all, when I try to do an image and have it linked some where a blue box will appear around it only on firefox and IE, not on Opera. How do I get rid of it??? I am using Dreamweaver Help PLEASE! Hello all, thought maybe someone could help me with a basic problem I'm having. I am fairly new to html and stuff but am off to a start to get a site running. The problem I am having is that the image i am using to link is offset vertically with vspace = 11 in order to line up lines with a border type thing. However, when you click the image link it includes the 11 pixels underneath it from vspace as part of the clickable link. Is there a way to make it so that only the image itself is a link and still add the 11 pixel spacing under it to get the image to line up with the rest of the site? Thanks! Code: <img style="width: 51px; height: 57px;" alt=" " src="images/icon/left.bmp"><a href="main.html"><img style="border: 0px solid; width: 92px; height: 30px;" alt=" " src="images/icon/bt1.bmp" vspace="11"></a> Code is just the part of the 2 images: the first image, and the linked image that I want to line up with the first image. Hello, I have an image that I want to cut into about 10 separate links. Is this hard? How do I do this? Thanks, I want to embed a social media block on my page that has all the little buttons and all the little links happy together. I almost had it too using this: <p> <a href="http://www.sample site.com" target="_blank"> <img src="http://my image" width="32" height="32" alt="RSS" title="RSS Coming Soon"> </a> This repeated so I had 6 little images for social media connections. In Internet Explorer all links worked, but there was a little line sticking out the right side of each image. In Safari only my last three image links worked but they have no annoying little line. Why? Anyone? Anyone? Ok, I have made a main page which is basically an image rollover. The rollover reveals text which is just part of the image. I want to make this text into links. I can't seem to be able to edit the rollover image in Dreamweaver. I tried placing an area map on the original image but that doesn't work. Any suggestions? Thanks muchly! What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? ________________________________________________________________ Buying diamonds online - James allen review - Bluenile.com review - Mondera Diamonds Review - Online diamond store reviews - Engagement ring guide - Engagement ring guide Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> Hi, I'm new at this and was wondering if anyone could help me with the Html syntax so that when i click on <a href> link instead of going to a new page it simply either drops down or pops out with a number of other links which actually bring you to pages?? Something like the main link it "options" and the sub link are "sounds" and "view". Thanks for your help!!!! |
|||||||