|
HTML - Tables With Clickable Images
Hi everyone, I'm new here and a total newbie - so please bear with me!
I want to create a table with 3 rows x 5 columns: Row 1: basic text Row 2: clickable image Row 3: clckable text The image in row two would be in the forum gallery, but the destination when the user clicks the image should be to the bands website. No matter what I do, i can't get a clickable image to sit into the table! If anyone could help with this simple piece of code I would really appreciate it. Thanks, Dave Similar TutorialsHi everyone, I'm trying to make tables clickable, simple right? Well I've tried all the solutions I could find on the net and none of them seem to work. If you look at my site (Bottleweb.org), I want to make the two tables (green and blue ones) on the main window clickable. I'd also like to change the background color and font color on mouseover. I'm already using java based rollovers to do the buttons. If you know how to do this please include all the java scripts I'll need too. Thanks Hi all, first of all i`m new here and my HTML experience is limited although I do work in the IT industry. Iv been asked to look at a piece of software called Proxy Pick which enables users to choose proxy information on thier laptops according to where they are i.e. at home or at work. Proxy Pick allows you to design your own custom inferface using HTML which im in the process of doing I`d like the options to be displayed as clickable images, and when clicked it enters the correct proxy details for you. at present I have the images which just link to a random website. I also have radio buttons which do enter the proxy information correctly when used, but obviously I want to have these radio button options as pictures. Can anyone help? Thanks I want to turn a 1024x768 image into a 600x800 image on my webpage, but when it's clicked upon it would show the original size, being 1024x768 -- I presume there is a simple way to do this? I tried googling up the results, hard to find. I have only meagre HTML skills and am trying to develop a fantasy-book fans website, will appreciate the replies. Hello, I'm using this tutorial on creating an ipod-esque "cover flow" photo album for a presentation I'm putting together: http://www.elated.com/articles/cover...ss-and-jquery/ What I'm trying to figure out is how do I make each image a clickable link that will open a url in a new window. I know the code is Code: <a href="URL" target="_blank"</a> but I have no idea where to begin and end the tags. I either need it where I can click on each picture, or the text under each picture so that each one has a separate URL that opens in a new window. thanks I have an 8 year old website with 99.9% valid HTML4.01 transitional code. The only problem I'm having is that the attribute "BACKGROUND" in my tables is not recognized as valid. I need to use images as backgrounds in some of my tables. Is there any way I can do this with HTML, or maybe an in line style sheet? I'm not at all familiar with CSS so I'm hoping that there is another way. Thanks. http://www.shiningstarwebdesign.com/pawcb/coaches.htm I used the design portion of Dreamweaver to put pictures in to the tables that say Competitor 1, 2, 3, and 4, and when opened in a browser, the pictures did not appear. I checked the HTML and couldn't find the problem. Does anybody know why these pictures are not showing up? Please take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. I need my background image in the main table to stretch the entire length of the viewers browser whenever the content of the page is not enough to require the use of the entire page. Using table height at 100% it will only extend as far as the farthest south piece of content on the page, which might not be the bottom of the browser window. The site is here, and i'm currently using a table height of 750px to take it off the bottom of the page. However in IE i get an unwanted scrollbar. Is there an easy workaround of do i just accept the scrollbar is going to be there? Also, if your bored can you tell me why IE wont valign the td to the top of the cell, whereas FF will, and how i might fix that pls? Thx! Hi all, I've been trying to fix this bug which won't go away. Yeah, it's basically images in tables, but before you cringe, I gotta declare that I'm using tables to display graphical data (that is, thumbnails in grids). I'm not using tables explicitly for layout. Visit the emulated-page at http://varlern.com/CrappyBug.html to see the problem. There's 4 cells. Notice that in every cell, there's some gaps at the right, top and bottom inside each cell (the left sides have no gaps). For a quick glance, below's the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tablestyle
{
table-layout:fixed;
width:740px;
border-collapse:separate;
border-spacing:3px;
}
.tablestyle tr td
{
border:1px solid black;
width:175px;
height:175px;
}
</style>
</head>
<body>
<table class="tablestyle">
<tr>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
<td><img src="Box.GIF" width="175" height="175" /></td>
</tr>
</table>
</body>
</html>
I've searched the forums and tried all kinds of tricks and fixes suggested for others who've encountered this before.... I've tried using "display:block" on the <img> tag, I've set the cellspacing, cellpadding, padding, margin, hspace, vspace, cols, rows, line-height, font-size and almost every dimension related tag in CSS / HTML to 0 .......but the darn thing just REFUSE to go away! I'm really angry, I tell you. Hopefully, someone can help! The problem occurs in both IE 6.0 and FF. Thanks! Xeon Does anyone have any easy javascript code for making clickable banners? Strange I'm going nuts trying to figure out what is causing this. On this page I have 4 links at the top (courses, reiki, etc) http://gocreatesocialmedia.com/fb/He...age/index.html two of them actually Link....and 2 don't. I have the links formatted exactly the same for all. Any suggestions on how to correct this ? HI 1) Is there a way to make a div with a logo and text clickable? 3) I read it was bad for seo? 2) Is there a way to make the background image change on hover? This is css or javascript ? Thanks for reading 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! Hi everyone, hope everyones well. I am desigining and coding an advanced myspace (the link to the space is: www.myspace.com/3face) and have ran into a problem, basically, The navbar on the page is set up using strategically placed divs for each button (i was trying to use tables but to hide the rest of the myspace content which I didnt want, the code used hide my table as well, so i couldn't use tables for it) So i am using DIV's for it now the problem I have is that some of the divs and parts of some of the divs arent clickable. I would change the z-index of them and it would fix it for that particular div but then would mess up on others, right now the divs which aren't/partially clickable a * Film * Favourites * Myspace TV the code for the navbar links is as follows: <div class="Home-navbar"> <div style="position: absolute; width:168px; left:153px; z-index:2; overflow auto; top: 1892px; height:42px; visibility: visible; background-color:transparent;"> <A href=http://home.myspace.com/index.cfm?fuseaction=user> <img src="http://i25.photobucket.com/albums/c99/3face/Home-navbar.jpg" style="border-style: none"/> </div> <div class="Browse-navbar"> <div style="position: absolute; width:168px; left:227px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://browseusers.myspace.com/Browse/Browse.aspx?z=1"> <img src="http://i25.photobucket.com/albums/c99/3face/Browse-navbar.jpg" style="border-style: none"/> </div> <div class="search-navbar"> <div style="position: absolute; width:168px; left:319px; z-index:2; overflow auto; top: 1895px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://search.myspace.com/index.cfm?fuseaction=find"> <img src="http://i25.photobucket.com/albums/c99/3face/search-navbar.jpg" style="border-style: none"/> </div> <div class="favourites-navbar"> <div style="position: absolute; width:168px; left:676px; z-index:2; overflow auto; top: 1893px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://favorites.myspace.com/index.cfm?fuseaction=user.favorites"> <img src="http://i25.photobucket.com/albums/c99/3face/Favourites-navbar.jpg" style="border-style: none"/> </div> <div class="film-navbar"> <div style="position: absolute; width:168px; left:471px; z-index:2; overflow auto; top: 1891px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://film.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Film-Navbar2.jpg" style="border-style: none"/> </div> <div class="mail-navbar"> <div style="position: absolute; width:168px; left:538px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://messaging.myspace.com/index.cfm?fuseaction=mail.inbox"> <img src="http://i25.photobucket.com/albums/c99/3face/Mail-navbar.jpg" style="border-style: none"/> </div> <div class="blog-navbar"> <div style="position: absolute; width:168px; left:600px; z-index:2; overflow auto; top: 1893px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://blog.myspace.com/index.cfm?fuseaction=blog.controlcenter"> <img src="http://i25.photobucket.com/albums/c99/3face/Blogs-navbar.jpg" style="border-style: none"/> </div> <div class="groups-navbar"> <div style="position: absolute; width:168px; left:217px; z-index:2; overflow auto; top: 1919px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://groups.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Groups-navbar.jpg"style="border-style: none"/> </div> <div class="invite-navbar"> <div style="position: absolute; width:168px; left:403px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://invites.myspace.com/index.cfm?fuseaction=invite"> <img src="http://i25.photobucket.com/albums/c99/3face/invite-navbar.jpg" style="border-style: none"/> </div> <div class="myspacetv-navbar"> <div style="position: absolute; left:401px; z-index:2; overflow auto; top: 1919px; visibility: visible; background-color:transparent;"> <A href="http://vids.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/MyspaceTV-navbar.jpg" style="border-style: none"/> </div> <div class="music-navbar"> <div style="position: absolute; width:168px; left:530px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://music.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Music-navbar.jpg" style="border-style: none"/> </div> <div class="comedy-navbar"> <div style="position: absolute; width:168px; left:615px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://comedy.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Comedy-navbar.jpg" style="border-style: none"/> </div> <div class="classified-navbar"> <div style="position: absolute; width:168px; left:710px; z-index:2; overflow auto; top: 1920px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://classifieds.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Classified-navbar.jpg" style="border-style: none"/> </div> <div class="forum-navbar"> <div style="position: absolute; width:168px; left:788px; z-index:2; overflow auto; top: 1894px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://forum.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Forum-navbar.jpg" style="border-style: none"/> </div> <div class="events-navbar"> <div style="position: absolute; width:168px; left:315px; z-index:2; overflow auto; top: 1918px; height:42px; visibility: visible; background-color:transparent;"> <A href="http://events.myspace.com/"> <img src="http://i25.photobucket.com/albums/c99/3face/Events-navbar.jpg" style="border-style: none"/> </div> If someone can help me and explain why it happens like this (im gonna be doing a computer science degree next year so I want as much knowledge as poss.) I would really appreciate it! Thanks Hey, i want to make an iframe Object invisible but still clickable. Is that possible, and if yes, how? Im using Dreamweaver CS5 greetings Phil Hello everyone I'm usually good at figuring stuff out, but this time I hit a doozy and can't seem to figure it out, hopefully someone here can help me. I have a gallery blog which is using this theme: http://www.elegantthemes.com/preview/eGallery/ my question is how can I make it so that users can click the thumbnail and go to the post rather than clicking the arrow on the bottom right. I've narrowed it down to <div class="thumbnail-div" style="background-image: url(<?php bloginfo('stylesheet_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumb; ?>&h=159&w=190&zc=0);"> but I don't now how to make them link to the post, any help would be great thank you. Trying to modify a template.. http://www.varaxon.com/ On the right, below the login box are 3 seperate boxes - I've been trying to make these completely clickable - I just can't seem to figure it out. I tried doing unordered lists, etc. Color me stupid - I'm just a lowly PHP Developer with minimal design/html coding experience. -G 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; } |
|||||||