|
HTML - Image Slice Problem
Hello.
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 Similar TutorialsI 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> 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 fixed problem never mind sorry! Because I'm still in the process of learning HTML, I am currently creating a webpage in GIMP and using the image map tool to build my website. I have a page at this URL: www.wildthangracing.zzl.org/index2.html The page is loading just fine, but there is white space at the top, left, and bottom of the page and I can't figure out how to get rid of it. Here's the code: <html> <head> <title>Wild Thang Racing</title> <img src="home.gif" width="1349" height="768" border="0" usemap="#map" /> <map name="map"> <area shape="rect" coords="255,133,651,187" href="index.html" /> <area shape="rect" coords="375,214,471,239" href="index.html" /> <area shape="rect" coords="485,216,612,239" href="about.html" /> <area shape="rect" coords="625,214,728,242" href="gallery.html" /> <area shape="rect" coords="738,209,904,240" href="contact.html" /> <area shape="rect" coords="918,209,996,240" href="links.html" /> <area shape="rect" coords="745,119,1079,202" href="http://www.facebook.com/wildthangracing" /> </map> </head> <body> </body> </html> Does anyone know what could be the cause of this? Hi everyone. I don't often use image maps, but for a project I'm doing at work at the moment, I felt it is appropriate, especially as I don't have (or know how to do) Flash. Here's the code I have for a an image map, which when you hover over each outside section, the image changes to another and back again when you hover out. Code: <h2>Overture</h2>
<p>Click on the sections for further information.</p>
<script type="text/javascript">
Image1 = new Image(523,541)
Image1.src = "overturemap.gif"
Image1.border="0"
Image2 = new Image(523,541)
Image2.src = "overturemap_over_appform.gif"
Image2.border="0"
Image3 = new Image(523,541)
Image3.src = "overturemap_over_prospecting.gif"
Image4 = new Image(523,541)
Image4.src = "overturemap_over_script.gif"
Image5 = new Image(523,541)
Image5.src = "overturemap_over_calc.gif"
</script>
<img src ="overturemap.gif" width="523" height="541" border="0" name="overture" id="overture" alt="overture image" usemap ="#overturemap" />
<script type="text/javascript">
function appform() {
document.overture.src = Image2.src; return true;
document.overture.src = Image2.border; return true;
}
function prospecting() {
document.overture.src = Image3.src; return true;
}
function script() {
document.overture.src = Image4.src; return true;
}
function calc() {
document.overture.src = Image5.src; return true;
}
function original() {
document.overture.src = Image1.src; return true;
}
</script>
<map id ="overturemap" name="overturemap">
<area shape="circle" coords="260,79,62" href="PrivateSIPPTrust_Application_Form.doc" target="_blank" alt="Application Form Image" onMouseOver="appform()" onMouseOut="original()" />
<area shape="circle" coords="78,267,62" href="/site/492/overture_prospecting.aspx" target="_blank" alt="Prospecting Image" onMouseOver="prospecting()" onMouseOut="original()" />
<area shape="circle" coords="445,267,62" href="/site/493/overture_telephone_script.aspx" target="_blank" alt="Script image" onMouseOver="script()" onMouseOut="original()" />
<area shape="circle" coords="260,456,62" href="CALC_Overture_1.11.xls" target="_blank" alt="Calculator Image" onMouseOver="calc()" onMouseOut="original()" />
</map>
What I want to know is, what's that top and left border doing on the image? I can't get rid of it and don't want it there. The working map can be viewed at http://swweb.frih.net/map/imagemap.html Many Thanks Hi all, I have a problem with one image on a website. Unfortunately it seems to be a problem only for my client. She's using a pc, latest Exploror and has Norton running (which may be the problem). Here's the page with the problem: http://www.sheilachandra.com/information/biog.html The problem image is the linked image on the right hand side, 'Get to know Sheila's career in three minute or less'. It just will not load in to the browser on my clients computer!! It's as if the link never existed. Here's the code that should be the Code: <a href="biog3.html"><img src="../images/general/3minsb.gif" width="120" height="60" border="0"></a> Here's the code that my client sees: Code: <a href="biog3.html"></a> Something has stripped the tag out of the link! Also, here's the bit of javascript that Norton places in the page. Not sure if that's got anything to do with it, but I thought I'd plonk it here anyway: Code: <script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
Any idea appreciated?? Go to http://chicagotrainingschool.com So the header shows fine in IE 8 and FF. IE 7 is the culprit here. In the middle of the header you see a languages menu, and below that is a world map picture. Looks perfect in FF. For some reason, that world map picture is pushing the nav bar down in IE 7. If I take the picture out or shorten the vertical height that solves the problem, but there are spare pixels there and I don't want to do that. Anyone have an idea of why this is happening and how to fix it? Hello, I literally only have the rest of today to figure this out; it is a quick fix I'm trying to do for a company. I'm sure this has been asked many times, but if someone would be so kind as to re-explain I would be SO grateful. I have made a website with an image map and tables that works well in Safari and Firefox, but gets pretty messed up in IE. The website is www.goldleafworld.com You can view the code there. I'm pretty sure this is something minor..if anybody has any suggestions I would be forever in your debt! Thanks in advance. Megan The image map on my site works fine in Safari and Flock on my computer... but works in neither on my actual website? I don't know where the coding could have messed up? i used java for the image map... if anybody knows a more foolproof coding method for it, let me know... www.illustrationbeast.com if anybody needs any of the code not on view source let me know Hi. At the moment I'm developing my new site but I have a strange problem. I want to insert an image and make it wider. The original resolution is 1 * 350px and I want to make it 200px wide. But when I insert the code below The image's heigth becomes huge. Code: <img src="images/t3.jpg" width="200px" /> Can you tell me what's the problem. This slows down the entire process. Ok, this probably sounds kinda noobie... or whatever but I put to image codes next to each other like so... HTML Code: <img align="left" src="ball1.png" alt="ball"> <br> <img align="left" src="ball2r.png" alt="ball2"> ok they both show but instead of it looking like this BALL1 IMAGE BALL 2 IMAGE There next to each other like this BALL 1 IMAGE BALL 2 IMAGE How do I solve this also...... how can I move text along without using this HTML Code: <p align="center" say if I only wanted a few spaces forward how would I do that? sorry for my lack of knowledge! After fixing the code for my image maps after my question yesterday, I got an email from a user saying this: "I just noticed one thing when viewing the site using IE. on the pages, IE is shrinking the image and rather than giving me the option to click on a link, it gives me a magnifying glass to enlarge the image. When i enlarge the image, I still can't click on the links. Instead I get the magnifying glass to shrink the image back down." Here is an example of the code: <img src="About.jpg" width="1100" height="825" border="0" usemap="#about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="http://www.com" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="http://www.com/teachers" title="FOR TEACHERS" alt="For Teachers" /> <area shape="rect" coords="469,29,516,50" href="http://www.com/support" title="SUPPORT" alt="Support" /> </map> It works fine with Safari and Firefox. What could be causing that problem with IE? Hi Friends, I have problem in IE6 using transparent png image. I have already include the IE6 png fix javascript file. If suppose using img tag, its no problem, but I set the png image within my td background its not display properly. here my code : <td align="center" valign="middle" style="background-image:url(images/footer_bg.png); background-repeat:no-repeat;"> also i attached the sample image. this is my problem. so anybody knows or face the same problem give me the solutions. Yours, vjn_23 (vijayan M) HTML Code: <a href="http://live.xbox.com/en-US/MyXbox/Profile?GamerTag=P2W360"> <img stely="position:absolute; TOP:30px; LEFT:30px; WIDTH:75px; HEIGHT:75px" src="http://i43.tinypic.com/35jibzd.pnge" /> </a> Why won't it position properly? I have 3 images, one is a background image that repeats, one is aligned left and another is aligned right. <td background="screen_header_02.gif" height="103"><img src="screen_header_04.gif" align="left"><img src="screen_header_03.gif" align="right"></td> it is fine, but the background image is not viewable when printing. so i need to come up with another way of using 3 images in the way i have, without using the background image. any ideas? Hi all Im having this weird issue.. On my site, under pics http://www.2muchspiff.com/weedimg/ some of the image are large, and when you zoom in on them, and zoom out, it makes the image all weird. How can i fix this? thanks Hello! I'm having trouble with a mouseover image I'm using. I've done mouseover before, but for some reason, it isn't working for me! It is a download button, and if you move your mouse over it, it is supposed to be highlighted. I have it on the page 11 times. If I use it just once, it works. If I use it more than once, it doesn't work. Can anyone tell me why? Much thanks!! http://slw.110mb.com/templates/tindex.html - the page http://slw.110mb.com/mainstyle.css - css page if you need it Hey all. I am having some trouble positioning some images to the right of a paragraph using css. Can anyone help? HTML: Quote: <!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=utf-8" /> <link rel="stylesheet" type="text/css" href="../public_html/pages/nature.css"> <!-- TemplateBeginEditable name="doctitle" --> <title>Nature</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <script type="text/javascript" src="../public_html/pages/nature.js"></script> </head> <body onload="MM_preloadImages('../public_html/content/homerollover.jpg','../public_html/content/aboutrollover.jpg','../public_html/content/clientsrollover.jpg','../public_html/content/contactrollover.jpg')"> <div class="pagecontainer"> <div class="header"><img src="../public_html/content/header.jpg" alt="Header" /></div> <div class="menunav"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','../public_html/content/homerollover.jpg',1)"><img src="../public_html/content/homebutton.jpg" alt="Home" name="Home" width="151" height="40" border="0" id="Home" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../public_html/content/aboutrollover.jpg',1)"><img src="../public_html/content/aboutbutton.jpg" alt="About" name="About" width="150" height="40" border="0" id="About"/></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Clients','','../public_html/content/clientsrollover.jpg',1)"><img src="../public_html/content/clientsbutton.jpg" alt="Clients" name="Clients" width="150" height="40" border="0" id="Clients" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../public_html/content/contactrollover.jpg',1)"><img src="../public_html/content/contactbutton.jpg" alt="Contact" name="Contact" width="149" height="40" border="0" id="Contact" /></a> </div> <div class="content"><div class="contentheader">Lorem ipsum</div><div class="contentcontainer"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lectus. Donec eget tortor id pede vehicula lacinia. Nam vitae risus non neque facilisis consectetuer. Suspendisse bibendum, sem nec rhoncus laoreet, diam tortor malesuada enim, volutpat volutpat sem nisi eget nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris scelerisque. Sed ligula. Mauris neque mi, rutrum nec, luctus a, dictum nec, libero. Duis feugiat erat eget metus. Fusce non orci. Vivamus vestibulum dapibus ipsum. Nunc dictum bibendum nunc. Nam odio augue, tincidunt eget, tristique quis, varius sit amet, justo. Suspendisse sed eros.</p></div></div> <div class="footer">Footer</div> </div> </body> </html> CSS: Quote: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; } body { padding-top: 3%; padding-bottom: 3%; background-color:#bfa494; } .pagecontainer { width: 600px; margin: auto; background:#FF0000; } .menunav { background:#8c8e73; height: 40px; } .header { background:#0000FF; height: 279px; } .content { border-left:#000000 1px solid; border-right:#000000 1px solid; border-bottom:#000000 1px solid; background:#ffffff; height: 300px; z-index:1; } .contentheader { padding:20px; color:#6c482d; font-size:20px; font-weight: bold; font-family:Arial, Helvetica, sans-serif; z-index:2; } .contentcontainer { margin-left:20px; margin-right:300px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:justify; z-index:3; } .images { padding-bottom:200px; padding-left:400px; z-index:4;} .footer { background-color:#0066CC; height:40px; } Image: http://pseudo.samcamfilms.com/temp.JPG Any help would be appreciated. Hi, I am trying to align the 4478aa color table that is under the banner at http://www.get-rid-of-pests.com. For some reason the table starts a few pixels to the right of the left border of the site. This leaves a gap before the nav bar that is unacceptable. Can someone provide me with a solution that will have the nav bar (table) start at the left edge of the site instead of a few pixels to the right? Note: I am using wordpress, the semiologic theme. The table code is in a text widget in the "Header Area" Section. Here is the code for the table: <table align="left" border="0" cellpadding="1" cellspacing="1" style="height: 38px; width: 764px;"> <tbody> <tr> <td bgcolor="#4478aa"> nbsp;<strong><span style="color: rgb(255, 255, 255);"><a href="http://www.get-rid-of-pests.com" style="color: white;">Home</a> <a href="#Site_Menu" style="color: white;">Site Menu</a></span><a><br /> </a></strong></td> </tr> </tbody> </table> All help is appreciated :-) |
|||||||