HTML - Image Slice - Code From Images On Photobucket Is Messed Up
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> Similar TutorialsHello. I can't figure out why my image slice isn't working right. As you can see in the example link below I have an image slice. This will be the border around some text. I placed a table in the middle of it for the text to a width that will fit in the box. But for some reason the text does not jump down to the next line when it reaches the set width. Instead, the box stretches and pushes the left side of the box out creating an empty space. So what I need is to make it so the text will stay within the width of the box. The more text I add the taller the box will get, but never wider. See what I'm talking about at this link: http://sbultimate.com/newdesign/box.html Thanks for any help. Ron <div style="width:600px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w22.photobucket.com/pbwidget.swf?pbwurl=http://w22.photobucket.com/albums/b339/ashezfal/product-misc/91c6ecdd.pbw" height="180" width="600"><a href="http://photobucket.com/slideshows" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn.gif" style="float:left;border-width: 0;" ></a><a href="http://s22.photobucket.com/albums/b339/ashezfal/product-misc/?action=view¤t=91c6ecdd.pbw" target="_blank"><img src="http://pic.photobucket.com/slideshows/btn_viewallimages.gif" style="float:left;border-width: 0;" ></a></div> This is the html code for a photobucket slideshow that i am trying to use on my website. my problem is that when you click on it, it takes you to my album. I know i can change that on photobucket preferences but i just want to make it so that it can't be clicked at all. Can anybody help me? Okay so I manage to make a design on photoshop so I then slice most the image to various parts and then had it transfer to dreamweaver so now its an html file. but now I want to add thing to those images like an image placement holder but when I try to add something such as a table or an image placement holder to one of the images that i sliced it keeps on putting the image or table outside the box where I want it to be. here is a video of my problem http://www.youtube.com/watch?v=ONXom...layer_embedded thanks Hello, I'm a bit of an amateur at HTML, I'm still using notepad to make my site ;-) Anyway for the most part I've had good success when updating my website, however now I'm encountring a real head scratcher and I'm hoping some of you kind and wiser gentlemen (and ladies?) can help. After inputting my code and building locally I see the image below to the left, however upon uploading all my goods (using Ipswitch WS_FTP Pro 30 day trial) it appears that my code has updated correctly, however none of my images show up, as seen on the below image to the right. I've attempted to troubleshoot this one a bit but I think I've hit a wall, I don't know if it's the FTP program I'm using (hasn't given me issues in the past) or if I'm running out of space on my site? but even some images that I merely swapped for newer images aren't updating (same file name, etc) It's as if it wont accept any new jpegs! I can change the code and the simple text that I have and it'll update fine and dandy but needless to say on a site that's supposed to feature art pieces, I'd like to get my artwork updated :-( My site is www.alexanderalza.com Any help would be GREATLY appreciated, thank you very much! hello i can't get my web page to display a picture from picture folder i have to use notepad its for my college assignments. anyone have any ideas what i'm doing wrong? Hi, I am not too sure if this is doable, but I have several buttons that let you put in an image location. Then at the bottom you click another button. I want this button to upload those images to my server. I know this sounds confusing, sorry. Does anyone know how to help me with this? thanks, David ok so I found this code online: HTML Code: <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }" onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})" ></span></a></div> </div> can someone help me understand it and potentially get it to work? when you the page i am working on in IE it does not line up the div tag correctly, p.s. the background is black for debuging reasons http://userpages.umbc.edu/~zane1/temp/insurethisnow/ IE is working fine for once, but when I view it in FF there are the bullets for the <li> showing up. How can I get rid of them ? Html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Keywords" content="beveled, glass, mirror, beveling, bevel, company, custom, design, shaped, shapes, curved, curves, round, polished, edgework, business, small, residential glass, etched glass, plate glass, tempered glass, tempered, replacement, replacement windows, remodel, window screens, screens, door screens, mirror, mirrors, custom glass and mirror, custom, Milford CT., ct., Milford,"> <title>Custom Glasss & Mirror</title> <link rel="stylesheet" href="style2.css" type="text/css" media="screen" /> </head> <body> <h5>Visit Our Newley Remodeled Showroom At 807 Boston Post Rd. Milford, Ct.</h5> <div id="container"> <!-- Start of Page Header --> <div id="header_container"> <div id="page_header"> <div id="header_company"> <img src="images/header6.jpg" width="500" height="200"> </div> <div id="header_menu"> <ul> <li><a href="#" /><span>Home</span></a></li> <li><a href="about.html" /><span>About Us</span></a></li> <!--li><a href="service.html/"><span>Services</span></a></li--> <li><a href="gallery1.html" /><span>Photo Gallery</span></a></li> <li><a href="contact.html " /><span>Contacts</span></a></li> </ul> </div> <div id="header_welcome"> <div id="welcome_text"> </div> </div> </div> </div> <!-- End of Page Header --> <!-- Start of Left Sidebar --> <div id="left_sidebar"> <!-- Start of Latest News --> <div class="box_container"> <div id="news"> <h4> Glass </h4> We have a wide range of choices when it comes to glass. Whether it's for a table top, cabinet door or replaceing your picture window, we have a piece of glass for you. <div class="link-more"> <a href="glass.html" />...more</a> </div> <h4> Window & Door Screens </h4> We can replace any size window or door screen. Do you have a damaged frame ? Bring it in, we can make you a new one. We even have paw proof screens . <div class="link-more"> <a href="screen.html"/>...more</a> </div> <h4>Home Improvment</h4> We now offer full home improvements. From kitchens and bathrooms, to a full addition. <div class="link-more"> </div> <h4>Shower & Tub Enclosures</h4> We carry a full line of standard and custom shower and tub enclosures. <div class="link-more"> <a href="enclosures.html"/>...more</a> </div> </div> <div class="clearthis"> </div> </div> </div> <!-- End of Latest News --> <!-- End of Left Sidebar --> <!-- Start of Main Content Area --> <div id="maincontent_container"> <div id="maincontent"> <div id="maincontent_top"> <!-- Start of How We Started --> <div id="started_container"> <div id="started"> <center> <table border="0" width="100%"> <tr> <td><h5> Free Estimates </h5></td> <td> </td> <td><h5> Fully Licenced and Insured</h5></td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> * Beveled Glass & Mirror<br> *Table Tops<br> *Plate Glass<br> *Plaxi Glass<br> *Patterned Glass<br> *Thermo Units<br> *Storm Doors & Windows<br> *Storm Door & Window Screen Repair<br> *Vinyl & Wood Replacement Windows<br> *Shower & Tub Enclosures<br> *Home Improvment<br> *Store Fronts<br> ... and much, much, more </div> </div> <!-- End of How We Started --> <div id="right_container"> <!-- Start of Get Special Offer --> <div id="offer_container"> <div id="offer"> We carry a complete line of cleaners to keep your glass, mirrors and shower enclosures as clean as the first day we installed them. <p> <center> <img src="images/products_ava.jpg"> <p> <a href="cleaners.html"/>...More</a> </div> </div> </div> <div class="clearthis"> </div> <!-- End of Get Special Offer --> <!--Start of repair--> <div id="repair"> <div class="link-more"> <a href="screen.html" /></a> </div> </div> <div class="clearthis"> </div> <!-- End of We Also Do Repairing --> </div> <div class="clearthis"> </div> </div> <!-- Start of Featured Products --> <div id="featured_container"> <div id="featured"> <center> <!--a href="gallery1.html">Photo Gallery Preview</a--> <div id="featured_products"> <ul> <li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-1669-lg.jpg" height="100" width="90" alt="" /></li> <li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-1631-b-lg.jpg" height="100" width="90" alt="" /></li> <li><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/brassline_b-158-lg.jpg" height="100" width="90" alt="" /></li> <li class="end"><img src="http://i39.photobucket.com/albums/e197/wrathchilds-santuary/glass%20shop/mirror3.jpg" height="100" width="90" alt="" /></li> </ul> <div class="clearthis"> </div> </div> <div class="clearthis"> </div> </div> </div> <div class="clearthis"> </div> <!-- End of Featured Products--> </div> <!-- End of Main Content Area --> <!-- Start of Page Footer --> <div id="page_footer"> Copyright 2007 <a href="http://wrathchild.edit-strike.nl" />Wrathchild Productions</a> </div> <!-- End of Page Footer --> <div class="clearthis"> </div> </body> </html> My Css is in the post below. Hello! I have a problem with my webpage, only occuring when I am surfing with Firefox. I have an identic code on two different pages, but on one of them the letters look normal, on the other one they are suddenly messed up. At the pictures it can be seen. I have no clue why it is happening... can anyone help? The text is good at for example: http://www.hungarybudapestguide.com/restaurants/ - but if I go in to read about whatever restaurant later described the texts are messed up in Firefox as seen on the picture. How come? Hey guys, Im new on here but i need some help with a table. http://er0r.freehostia.com/test.html -See how in the content section its writing is about half way down the page? How can i make it at the top? Quote: The coding : HTML Code: <center> <table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"> <tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <img src="http://er0r.freehostia.com/er0rbannah.jpg"> </table> </td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <a href="http://er0r.freehostia.com/about.html"> <img src="http://er0r.freehostia.com/about.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/baits.html"> <img src="http://er0r.freehostia.com/baits.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/files.html"> <img src="http://er0r.freehostia.com/Files.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/tutorials.html"> <img src="http://er0r.freehostia.com/tutorials.jpg" border="0"> <br> <a href="http://er0r.freehostia.com/Guestbook.html"> <img src="http://er0r.freehostia.com/Guestbook.jpg" border="0"> </table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table> </center> Thanks er0r I have created a website which works perfectly in IE7/8 and FF but its all messed up in IE6. Please someone help me fix it. HTML Code: http://www.paknus.com/nus Code: <p><center><table width="50%" bgcolor="black" cellpadding="20px"><tr><td><a href="index.html">Home</a></td><td><a href="imglist.html">Img list</a></td></tr><td><a href="about.html">About</a></td></tr></table></center></p> in ie the center works fine, but in firefox its almost 2 inches to the left of being center, why would that be? I am working on a site, and want to make 3 tables (one on top of another). Here is an image depicting what I want to do: Layout. I made the layout without 3 tables, just one, and it works fine. Here it is: 1 Table. But when I make three tables, like the picture shows, it messes all the spacing up. 3 Tables. I am doing all of this because I want to make a form and to make a form all of the fields need to be in one table. Here is how far I got with the form: 3 Tables and Form. Any help would be greatly appreciated. Thanks, Matt **Also, the site looks better in firefox than IE, so view it in IE to see the real problems. Hey, Well, I made this webpage, and when I preview in IE its ok, but in opera theres something messed up. I use table (I know thats bad, but I'v got it to work before), and I use css to script hoover images(buttons) in the menu and stuff. When I preview these in Opera, it shows both the ordinary image, and the hoover image partially overlapping and making the table bigger and messe sup everything. Any ideas? All of a sudden I can't put in an affiliate link that contain an image. There's no problem with a text link. I've tried all kinds of links but none of them work. Every time I put one in a "img class with 4 random 20 character sets jumps in and the link doesn't work. Here is what I mean I put this in <a href="http://www.tkqlhce.com/click-4072394-10684742" target="_top"> <img src="http://www.awltovhc.com/image-4072394-10684742" border="0" alt="$5.99 Flat Shipping up to 15lbs" width="120" height="90" /></a> and this comes out <a href="http://www.tkqlhce.com/click-4072394-10684742" target="_top"> <img class=" gyucpbdejrxphzavvzpr gyucpbdejrxphzavvzpr" src="http://www.awltovhc.com/image-4072394-10684742" border="0" alt="$5.99 Flat Shipping up to 15lbs" width="120" height="90" /></a> I imagine it's something I have done as I seem to be able to mess up just about everything in my computer sooner or later. I sure would appreciate any help I can get on this as I've been playing with it for the past week. Thank you, donrock I really hope someone can help me with this. About 2 months ago all my websites plummeted in the search engines. I found out later that i had a permalink structure problem which i solved by disabling a certain plugin. After that, i thought my rankings would have returned but unfortunately they didn't. With no clue as to where to go from there, i contemplated deleting my 5 websites and starting again from scratch. Then i noticed my keywords showing up in Google were messed up. All of my posts on all websites had the "website title" tacked onto the end of each post. Example: I have a post called "Natural Sleeping Remedies" When this post shows up in the search engines it looks like this... Natural Sleeping RemediesNatural Health Remedies As you can see, the title of my website homepage (Natural Health Remedies) is tacked onto the end of my post title. This happens with every post, on all websites. No matter how much i changed the post title, nothing helped. I thought that if i changed the theme, it would solve the problem. So, i tried theme after theme and finally came across one that worked. But, the big problem now is that i can only use one theme for all my sites which is just not appropriate for some sites. Every time i want to use a new theme, the homepage title always gets tacked onto every post, unless i use the same theme all the time. Has anyone had this problem before? Any ideas how to fix this? At the moment all is fine because i use this one theme, but i really don't like it. P.S. I created another website last week and the same problem is always there. Is there a php file or html file that i can look at to determine what is happening. I'm a newb when it comes to this sort of stuff. Feeling dejected at the moment. Thanks in advance for any replies. 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 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 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. |