|
HTML - Replacing 404 Images With Standard Image
If you view my site: www.vivalefrench.com you can see that I have a few dead image links. And there are a few here and there and it would take a long time to adjust...is there an easy way to add a short piece of code at the top of my index page to detect 404 images and replace them with a standard (noimage.png) file.?
I have seen somthing that you can do for each individual image but I'd like to put the code at the top to save time Similar TutorialsHi, I have a website where i am reselling. They use fixed templates so its easy to use but they include header and footer html boxes so that you can put in your own code. I have used these boxes to change my background and font colour however there are a couple of images on there that are now the wrong colour and i cant seem to figure out code to change these images, just add to them. Does anyone know of any code that replaces one image with another? thanks! Chris This thread; plain and simple.. I want the following tags: HTML Code: background-image:url(blokje.png); background-image:url(onderkant%20curve.png); Replaced with something like this: HTML Code: <img id="pic" src="top.png" alt=""> Why? Because the top.png image is the only image that loads correctly when mail template is sent to mail recipients. Please advice, thank you. Source: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://asitisinheavenagain.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
#container{
width:711px;
margin:auto;
font-family:verdana,sans serif;
font-size:16px;
background-image:url(blokje.png);
}
#pic {
display:block;
}
#content {
padding:0 0 60px 50px;
background-image:url(onderkant%20curve.png);
background-repeat:no-repeat;
background-position:0 bottom;
}
#p-one {
font-weight:bold;
color:#410d3e;
}
#pic-one {
text-align:center;
}
#pic-one img {
width:170px;
height:190px;
}
#link {
font-size:12px;
}
</style>
</head>
<body>
<div id="container">
<img id="pic" src="top.png" alt="">
<div id="content">
<p id="p-one">
Nieuwsbrief Februari 2010
</p><p><br>
Beste Lezer van mijn eerste nieuwsbrief,
</p><p>
Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br>
Sessio Communications.
</p><br>
<p id="pic-one">
<img src="koord.jpg" alt=""><br>
<a href="http://www.asitisinheavenagain.com">www.asitisinheavenagain.com</a>
</p><p>
Ik nodig je van harte uit om <a href="http://www.asitisinheavenagain.com">mijn website</a> te bezoeken.<br>
Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br>
<a href="[FORWARDTOFRIEND]">Stuur deze email door naar een vriend of vriendin.</a></p><br>
</p><p>
Mocht je geen belangstelling hebben om op de hoogte te blijven van<br>
mijn verschillende workshops en trainingen dan kun je dat via de <br>
link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd.
</p><p><br>
</p>
</p>
</div>
</div>
</body>
</html>
I have a small image (icon) which when clicked will take you to one of x number of sites via a random link generator. Here is my html where randomlink refers to a javascript routine in the head. <form> <p><input type="button" name="B1" value="Random Link >>" onclick="randomlink()"></p> </form> This works fine in returning a random website (actually one from a list). But I would like to replace the button with an image. I tried this but no joy: <form> <input type="image" onclick="randomlink()" value="Random Link >>" src="../images/icon.jpg"> </form> What am I doing wrong? Hugh Hey Guys, I am a graphic designer and don't know much about HTML (but am taking a class and about to start a few books). I am using tumblr right now and I am try to replace the automated header ("black atom studio") with a jpg banner. Anyone know where in the HTML I would do this and what code I would need to swap in? (the website I am working at is www.blackatomstudio.com ) (not a plug, just incase you guys need to see what I am talking about) Here is the code I need help on. http://snipplr.com/view/8582/blackatoms-tumblr/ I've searched all over the place, but can't find any documented HTML coding standard. I'm looking for something that I can use as a guideline for my developers to use. Some kind of a document along the lines of: - how layouts should be designed without using tables - when to use div's and when to use span's - how to properly control text flow - only using CSS for formatting - avoiding inline styles - using inherited CSS classes - etc... I have an enterprise-level .Net application written in C# and using XML for content parsing. We already have a standards guide for C# and XML is pretty self explanatory (in our setup at least), but nothing for HTML. I looked on W3C and other similar sites, but they don't have any actual "standards documents". Did anyone ever have to write something like that? Any help or a link would be appreciated. Hi all, I have build a website and i am now trying to respect every HTML standard and optimise the site for all kind of configuration and browser. I am trying .. My first question is about font. My whole website is build using TAHOMA font. I don't even know if it is a standard font for every OS and browsers. Is it ? Also, if not, should i test the site using another font and specify this alternate font somewhere? If yes, which one and how ? You can have a look at my page ( french page, for my girlfriend who is a musician ) The whole website is running but i am changing many things so my test link here for you would be <link removed> The bottom line of the page appear on 2 separates lines on Firefox and Conqueror. I am using browsershot.org for testing. See link : http://browsershots.org/website/http...envenuet1.html Something makes this line separate in 2 but why... Thanks for your input. Bob Hi People. I am hooked onto AJAX based apps these days. Instead of using JS to create html using strings. What I did was create a structure in html and clone it to repeat the structure using JS. But, to prevent DOM from being corrupted, I had to append a unique number to the ID of each element (and I had to attach the data to the element anyway). So, instead what I did was remove the ID of the element while cloning and used my own 'data' attribute to attach the data to the element. But, this would violate the W3 standards, right? Or it Wont? What is a better solution? Here is my 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" dir="ltr" lang="en"> <head> <title>Prospective Student Database</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <form action="insert.php" method="post"> <input type="radio" name="gender" value="1">Male </form> </body> </html> I am trying to follow the W3C standard, which I put in the W3C HTML validator. It keeps giving me a error of the radio button should end with '/>' instead of '>'. Like this: Code: <input type="radio" name="gender" value="1"/>Male But I checked the W3C recommendation. Even their recommendation on the radio button doesn't end with '/>' The recommendation is he http://www.w3.org/TR/html4/interact/forms.html The first example already showed. What is the problem? Thanks. Hi All, Im just wondering what the standard Width and Height is for a website nowadays? Thanks in Advance Hello, I have a question from the sample images that I've illustrated. How can I create a HTML page based on image above? I not good in HTML or CSS. I'm just a gfx designer. Can someone show me some basic code for this. Thanks in advanced. i have 3 images, 2 are feather's images and 1 is text image i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above) as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends i have attached a sample image please help me in writing its code I know how it is to work hard on images and lose them in one shot to scammers. One time I worked hard on a banner and made a thread asking for members to rate it. A guy came along, stole it, edited it and went to another pop forum and told everybody it was his So I worked on some image protection scripts. Enjoy. Disable PrtSc Req Sys Print screen is a button on your keyboard that can take a picture of the screen and send it to your clipboard. My script will manipulate other's Print screen key until they leave the page. Besides, how many people actually use that button? Put this in your <head> tags. HTML Code: <SCRIPT LANGUAGE="JavaScript"><!--
function do_err(){return true}onerror=do_err;function no_cp(){clipboardData.clearData();setTimeout("no_cp()",100)}no_cp();//--></SCRIPT>
Disable Page Printing Some people want to steal information by printing. Want to prevent this? Disable printing! Put this in your <head> tags. HTML Code: <script language=JavaScript>
<!--
function atlpdp1(){for(wi=0;wi<document.all.length;wi++){if(document.all[wi].style.visibility!='hidden'){document.all[wi].style.visibility='hidden';document.all[wi].id='atlpdpst'}}}function atlpdp2(){for (wi=0;wi<document.all.length;wi++){if(document.all[wi].id=='atlpdpst')document.all[wi].style.visibility=''}}window.onbeforeprint=atlpdp1;window.onafterprint=atlpdp2;
//-->
</script>
Disable Image/Text Drag This neat script will prevent anybody from dragging text or images. This also goes between the <head> tags. HTML Code: <SCRIPT LANGUAGE=javaScript><!--
document.onselectstart=new Function("return false");document.ondragstart=new Function("return false");
//--></script>
=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ If you use my scripts and appreciate them, please donate to: janard@hotmail.com (PayPal) Thanks, Gold Hi! I have just reuploaded my site, which contains 3 image flips, and I am only seeing the outline of where the images should be in both Safari and Internet Explorer. This is strange because before re-uploading, this functioned just fin. Any ideas? Thanks! Here is the problem area: http://www.lolaandcricket.com/loe/index.html Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer. i got the design for the site from a template but i remade a majority of it and used photoshop to slice it. so heres the problem, the page is fine the way it is, but i need to be able to type in the white area. i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image. please help me. thanks in advance. http://haskinsart.awardspace.com/index.html above is the page with the image as the white space (the body(where i want to type)) http://haskinsart.awardspace.com/indexart.html and this one has the table. but as u can see now i have gaps!!! please help me. Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe I have created an image in Photoshop and sliced it to create different links as a banner. When I opened the html file on my computer it works and the links all work. The part that doesn't work is when I changed the file locations to the location on photobucket. Somewhere I have something wrong. If anyone can direct me on what I need to correct I would greatly appreciate it. I feel like I am close but something is off. This is the image itself http://www.shopmemento.com/images/me...gemap4copy.jpg This is where I got the directions of how to do a multiple link image with image slicing: http://www.createblog.com/tutorials/...l.php?id=13888 HTML Code: <HTML> <HEAD> <TITLE>memento image slice</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (memento image slice.psd) --> <TABLE WIDTH=338 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=8> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif" border="0" alt="Photobucket"></a> <WIDTH=338 HEIGHT=131 ALT=""></TD> </TR> <TR> <TD> <A HREF="http://www.shopmemento.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Website'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=46 BORDER=0 ALT="Memento's Website"></A></TD> <TD ROWSPAN=2> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_03.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_03.gif" border="0" alt="Photobucket"></a> <WIDTH=15 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.blogspot.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Blog'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_04.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_04.gif" border="0" alt="Photobucket"></a> ><WIDTH=69 HEIGHT=46 BORDER=0 ALT="Memento's Blog"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_05.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_05.gif" border="0" alt="Photobucket"></a> <WIDTH=18 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.etsy.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Etsy Shop'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_06.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_06.gif" border="0" alt="Photobucket"></a> <WIDTH=68 HEIGHT=46 BORDER=0 ALT="Memento's Etsy Shop"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_07.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_07.gif" border="0" alt="Photobucket"></a> <WIDTH=13 HEIGHT=56 ALT=""></TD> <TD> <A HREF="mailto:terri@shopmemento.com " ONMOUSEOVER="window.status='Email Memento'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_08.jpg" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_08.jpg" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=46 BORDER=0 ALT="Email Memento"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_09.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_09.gif" border="0" alt="Photobucket"></a> <WIDTH=8 HEIGHT=56 ALT=""></TD> </TR> <TR> <TD> <IMG SRC<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_10.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_10.gif" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_11.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_11.gif" border="0" alt="Photobucket"></a> <WIDTH=69 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a <WIDTH=68 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=10 ALT=""></TD> </TR> </TABLE> <!-- End ImageReady Slices --> </BODY> </HTML> I have this problem - I want to use this tree http://www.destroydrop.com/javascripts/tree/ on my page. On the left part of the page there would be the tree menu, on the right part there would be some data (tables, navigation etc.). First I had table with 2 cells, one with tree, one with data. Unfortunatelly the tree behaved badly (was cut when unwrapped). Then i replaced the table with <div tags>. This was ok at frst Code: <div style="float:left">Tree part</div><div style="float:left">Data part</div> Problem was, that when data was too wide, they were placed below the tree and not next to the tree This is better (wrapping wide data is ok): Code: <div style="white-space : nowrap ;"> <div style="display : inline ;">Tree part</div><div style="display : inline ;">Data part</div> </div> , but there's problem too - every other choice than display:block makes the tree again behave wrongly. I don't want to relinquish that tree - it's simple to construct, has many configuration choices, remembers state by cookies etc... Does exist another choice how to replace 2 cells (side-by-side) with <div> tags ? Or do you know another good (and free) tree such as above? Thanks. I listened to the advice a member here gave me a day ago and I ditched tables and just went with CSS. It's been working great so far, the page made with CSS looks exactly like the one made with tables - except for one thing: the submenu. In this picture you can see the problem: I want the red and orange submenu on the left to extend all of the way down to the footer. Here's my CSS for the footer, header, and submenu: Code:
.subnav {position: relative; text-align: center; width: 140px; height: 100%; padding: 0px; float: left; vertical-align: middle; background-color: #FF7F00; border: 1px solid #fdaf61; border-right: 8px solid #ff0000; }
.content {margin-top: 10px; width: 560px; height: 100%; margin-left: 140px; padding: 0px; border: 0px;}
.footer {font-family: arial; color: #000000; background-color: #ff0000; font-size: 10pt; width: 100%; height: 20px; position: relative; padding-top: 5px; float: left;}
I don't want to make the .subnav (submenu)'s position to absolute because then the orange and red will extend all the way down to the page when I want it to end at the footer. Thanks in advance |
|||||||