|
HTML - Xhtml Image Link Problem
Hey all.
I'm having a problem with my website's image links. For some reason there are orange bars around all of the images that are in link tags, and when you click on them they turn purple. They're very tacky and I have no idea why they're there. Here's my website's URL: www.populous3.co.nr Here's the code for one of the pictures: Code: <a href="images.htm"><img src="/images/images.jpg" /></a> Any help will be appreciated! Thanks, Suleiman Similar TutorialsHey, im making a portfolio site and i am linking my images except when i link them i get a small blue border around it whihc moves it down a bit and it looks outta place i was wondeirng is there anyway to take this border out or not plz help. heres what it looks like be4 and after. Ok, what is the code to put in to get this done? I have image at: images/tables/image.jpg and i need to show it at work/portfolio/index.html The problem is if i link to images/tables/image.jpg it will now show it cause the path is wrong at work/portfolio/index.html, how do i set path to the image? do i just put ../images/tables/image.jpg or what is the right code? thanks! i'm trying to give a url link to a image...but after i gave the link, that image appears to be bumped up and automaticaly put a blue border around that image. site reference is mahinthan.net46.net plz help me to get rid from this problem thanks Hello, I'm new to the forums =) I'm currently having a problem with my navigation which involves images. Initally I used the traditional image map method using area maps and the usemap function but it only worked in the webpage itself, and when the webpage shows in an iframe the links are nonexistent. So I sliced my navigation to give the sliced images the url link instead. As usual, they work on their own but when the page is shown in an iframe, some of the links disappear (you can't even hover on them) only in Firefox, Chrome and Safari. But some of the links are also still intact. In IE and Opera they work perfectly fine. Below is the code for the page which contains the navigation and links aforementioned, which will be displayed in an iframe of another page: Code: <!-- ImageReady Slices (mainframe.jpg) --> <table id="Table_01" width="971" height="565" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/mainframe_01.gif" width="200" height="531" alt=""" style="z-index:-3;"></td> <td> <a href="defence.html" target="_parent" onmouseover="window.status='STET Defence'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_02.gif" width="332" height="163" border="0" alt="" style="z-index:1;"></a></td> <td rowspan="4"> <img src="images/mainframe_03.gif" width="438" height="531" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="163" alt=""></td> </tr> <tr> <td> <a href="maritime.html" target="_parent" onmouseover="window.status='STET Maritime'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_04.gif" width="332" height="134" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="134" alt=""></td> </tr> <tr> <td> <a href="homelandsec.html" target="_parent" onmouseover="window.status='STET Homeland Security'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_05.gif" width="332" height="138" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="138" alt=""></td> </tr> <tr> <td rowspan="2"> <a href="centre.html" target="_parent" onmouseover="window.status='STET Centre'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_06.gif" width="332" height="130" border="0" alt="" style="z-index:1;"></a></td> <td> <img src="images/spacer.gif" width="1" height="96" alt=""></td> </tr> <tr> <td> <a href="https://mail.stet.com.sg/owa/auth/logon.aspx?url=https://mail.stet.com.sg/owa&reason=0" target="_parent" onmouseover="window.status='Login to Intranet'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_07.gif" width="200" height="34" border="0" alt="" style="z-index:1;"></a></td> <td> <a href="sitemap.php" target="mainframe" onmouseover="window.status='Lost?'; return true;" onmouseout="window.status=''; return true;"> <img src="images/mainframe_08.gif" width="438" height="34" border="0" alt=""></a></td> <td> <img src="images/spacer.gif" width="1" height="34" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> <div id="pict" style="position:absolute;top:200px;left:10px;z-index:0;"> <iframe name="news" src="news.php" FRAMEBORDER=no name="frame" allowTransparency scrolling=auto style="filter:chroma (color=#FFFFFF)" width="185" height="90"></iframe> </div> There is another iframe in this page which I wonder might be causing the problem. However even when I removed it the problem remains. Any ideas how to fix it? Would really appreciate the help, thanks! This is my first post here. Hi and thanks in advance for any future help anyone may be able to offer. I am not very good at html and I have just received a class assignment that I am having a lot of trouble doing. I am not having much luck finding tutorials that create an image gallery. Here is the assignment I have to do: Quote: In your previous assignments, you may have found that when you click on a gallery item in someone's gallery, you are shown a larger version of the image with more information about the piece. This is called a "detail" page. Your assignment is to design (using text only) a 600 pixel by 400 pixel detail page that includes an area for a main image, a description, next and previous buttons, and a close window button. Then collect five placeholder images from the Web. Create one detail page for each of your five placeholder images. For each image, write a short description that includes an unordered or ordered list. Also, remember to cite the sources from where you got the images unless they are your own images. Then link these pages together so the previous and next buttons send the user back and forth through the list of images. Remember that just because these are images now, you can easily replace the images with programs or files you create later on. Put each of your detail pages into a single folder, zip the folder, and upload the zip. I am really unsure how to get started. Thanks. Both of the ways [see code below] for some reason do not work with XHTML transitional. I am getting this error: end tag for "link" omitted, but OMITTAG NO was specified. How can this be fixed? This stuff in red seems to be sorted now, but I still have the problem with my php page [I've been developing a portfolio which is viewable at timdonaldson.com . I started making in with a HTML page, but to get the thumbnails to pop up like they do I had to transfer it into an xHTML page. I did this but blue aspects that I had styled went pear shaped and I'm not sure where I went wrong. There are horizontal lines made from 1px high div tags that don't show at all and small italic text that should be blue shows up black. Can anyone lend me some ideas on how to fix this? A standard HTML version of the page can be seen at timdonaldson.com/index2.html. I have a couple of other problems to... In the thumbnail gallery, some images don't link in OSX firefox, they don't have a problem in safari though. the 4th image from the left on the top row is like this.] And when you write in the contact form and send me an email, the php sends you to a thank you page, the text on this page doesn't want to be styled no matter what, I can manage to put it into a div container and centre it but that is about it. changing fonts or sizes with css doesn't do anything. I cant get my head around these couple of problems. Any help would be greatly appreciated! I have been creating a website with Javascript. When the user rolls over an image button, the button will glow and when the user presses on the button it will change to and image of the button being pressed. This program has been working with at least 6 buttons but the current button i'm working on stops doing what the previous buttons did and I would like to know why. I copied the codes exactly the same as the previous buttons, changed the image picture and provided the correct links to each image but somehow it just stops working. Thank you for your help (: -=Example of the codes=- Button 1: <a href="'test2.htm" onMouseDown="pressButton('chatBtn');return true;" onMouseOver="overButton('chatBtn');return true;" onMouseOut="releaseButton('chatBtn');return true;"><img name=chatBtn src="images/chat.png" border="0" alt="Chat" /></a> Button 2: <a href='test.htm' onMouseDown="pressButton('backBtn');return true;" onMouseUp="overButton('backBtn');return true;" onMouseOut="releaseButton('backBtn');return true;"><img name=backBtn src="images/back.png" border="0" alt="Back" /></a> Javascript code: // Preloading Images if (document.images) { chatBtn_up = new Image(); chatBtn_up.src="images/chat.png"; chatBtn_down= new Image(); chatBtn_down.src="images/chatPress.png"; chatBtn_hover = new Image(); chatBtn_hover.src="images/chatHover.png"; backBtn_up = new Image(); backBtn_up.src="images/back.png"; backBtn_down= new Image(); backBtn_down.src="images/backPress.png"; backBtn_hover = new Image(); backBtn_hover.src="images/backHover.png"; } // Event Handlers for button function pressButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_down.src'); } function releaseButton(btName) { if(document.images) eval('document.'+btName+'.src='+btName+'_up.src'); } function overButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_hover.src'); } Hello I have this weird problem with the following simple code HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml' dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="includes/js/general.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
Fire fox and chrome thinks that everything is fine, On internet explorer the stylesheet is not working When I take off the DOCTYPE it works in explorer as well what is my problem ? Thanks Lior My web site www.wayneactorscommunitytheatre.org is having a problem with the navigation on some computers. Dong a mouse over on the header brings up a drop down list for navigation. Doing a mouse over these brings up others. On some computers this doesn't work and users are unable to connect to the lists that come up. It works great on a couple of system I have but two users have complained to me that on their XP internet Explorer it doesn't work. Anyone have any suggestion to how I can fix this? The xtml and css pages verify and I am at a loss as to what the problem is. So I decided to see if I could make my site XHTML 1.0 Strict-compliant. Here's the main page on my test server I'd be thrilled with it if I could do 3 things: - Set the background color of the left column to match the color behind the fonts. Is there a CSS class I can create and set the cells to that class? - Remove the border around clickable images. - Get the spacing between the menu options on the left to look the way it does on the other pages in the site. If you click any of the pages on my actual site you can see the look I'm going for. Thanks as always for the help! Joshua Hi. My entire site is 100% XHTML1.1. Except for some new code I added which causes errors in validation. the code is HTML Code: <a href="http://babelfish.altavista.com/babelfish/" onclick="window.open('http://babelfish.altavista.com/babelfish/trurl_pagecontent?lp=en_it&url='+encodeURIComponent(location.href));return false;" title="Translate to Italian"><img title="Italian" src="http://geekimo.com/licons/it.png" alt="Italian" /></a>
I understand maybe CDATA islands can help with this? or making it external? but I have no idea how to do that with it having html code in there too.. I don't know if you can surround it in CDATA tags. There are other lines of code too, exactly the same except have different languages. Any help would be awesome! the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Which one is better? XHTML STRICT 1.0 or XHTML 1.1 im kind of new to design and some of my image links have a small blue box around them and i dont know what it is. Im using dreamweaver to build my site. it is www.devilthreads.com if you want to check it out But how do i get rid of that damn blue box around the image link Say I have an image that is 400px tall, and 200 px wide. What do I have to do so that if the user clicks the top half of the image, it takes him to a certain link, and it takes him to a different link if he clicks the lower half? I think this is possiboe, and I do not want to use 2 images... Thanks! I appreciate all your help! I'm not sure if this belongs in HTML, CSS, or somewhere else entirely, but I thought I'd start here... I'm creating a photography website in which the background is black. Right now, the site is very basic...pretty much entirely done in HTML and a little CSS. I have a set of thumbnails that link to a full size image. I know that I could have the thumbnail link to another html page entirely, and have that page display my photo as well as background colors, but I was wondering if there was a way to link directly to the photo, yet have a black background when the browser opens the photo. Hey guys, I want to click a button that is behind an image (set in absolute position). The button that I am trying to click is within an iframe so I cant use any sort of javascript to click it. The click must be real and not faken. Iframe containing button ----> Image over it Is there anyway I can setup the image so I would be able to click thru it (add transparency setting or something like that)? The image must remain visible but I want to be able to click the button that is under it. The goal is to make the visitor click the image but it would actually click the button in the iframe behind it. Thanks alot guys, I've got a photo gallery set up for my site, each gallery pops up in a new window. Within each gallery there are various thumbnails. Is there anyway I can link the thumbnails to open in a specified area of the window? (while still showing the other thumbnails) This is what I do have: <img src="images/Thumb/dress/dress3.jpg"> <img src="images/Thumb/dress/dress4.jpg"> <img src="images/Thumb/dress/dress5.jpg"> <img src="images/Thumb/dress/dress6.jpg"> --I haven't added the link html yet because I'm not sure if it will be different from the norm..please help |
|||||||