|
HTML - Help W/ Rollovers (image+code Included)
Hi guys, this is the site: http://eksow.com/
This the the source code for it: Quote: <html> <head> <title>Eksow Event Design & Management</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <SCRIPT TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. var rollOverArr=new Array(); function setrollover(OverImgSrc,pageImageName) { if (! document.images)return; if (pageImageName == null) pageImageName = document.images[document.images.length-1].name; rollOverArr[pageImageName]=new Object; rollOverArr[pageImageName].overImg = new Image; rollOverArr[pageImageName].overImg.src=OverImgSrc; } function rollover(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; if (! rollOverArr[pageImageName].outImg) { rollOverArr[pageImageName].outImg = new Image; rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src; } document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src; } function rollout(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src; } //--> </SCRIPT> <!-- ImageReady Slices (Untitled-1 copy.psd) --> <Center> <table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/Eksow_01.jpg" width="1024" height="261" alt=""></td> </tr> <tr> <td rowspan="4"> <img src="images/Eksow_02.jpg" width="65" height="507" alt=""></td> <td> <A HREF="#" onMouseOver = "rollover('left')" onMouseOut = "rollout('left')" ><IMG SRC="http://eksow.com/images/Eksow_03.jpg" NAME="left" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_1_03.jpg"); //--> </SCRIPT> </td> <td colspan="2"> <A HREF="#" onMouseOver = "rollover('middle')" onMouseOut = "rollout('middle')" ><IMG SRC="http://eksow.com/images/Eksow_04.jpg" NAME="middle" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_2_04.jpg"); //--> </SCRIPT></td> <td> <A HREF="#" onMouseOver = "rollover('right')" onMouseOut = "rollout('right')" ><IMG SRC="http://eksow.com/images/Eksow_05.jpg" NAME="right" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_3_05.jpg"); //--> </SCRIPT></td> <td rowspan="2"> <img src="images/Eksow_06.jpg" width="78" height="491" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/Eksow_07.jpg" width="881" height="262" alt=""></td> </tr> <tr> <td colspan="5"> <A HREF="#" onMouseOver = "rollover('bottom')" onMouseOut = "rollout('bottom')" ><IMG SRC="http://eksow.com/images/Eksow_08.jpg" NAME="bottom" ALT="Home Page" BORDER=0 ></A> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://eksow.com/images/Rollover_4_08.jpg"); //--> </SCRIPT></td> </tr> <tr> <td colspan="2"> <img src="images/Eksow_09.jpg" width="567" height="8" alt=""></td> <td> <img src="images/Eksow_10.jpg" width="21" height="8" alt=""></td> <td colspan="2"> <img src="images/Eksow_11.jpg" width="371" height="8" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="65" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="292" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="275" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="293" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="78" height="1" alt=""></td> </tr> </table> </center> <!-- End ImageReady Slices --> </body> </html> Here is what I'm trying to accomplish, but have no idea where to start from... 1. When people go to the site, the pictures at the bottom don't appear 2. When people click on "Hospitality Night" (far left), then the pictures appear 3. When it's clicked, the rollover image stays (white box) So in laymans terms... I go to the site, I click on far left link, pictures show. I click on the middle link, diff pictures show i click on the right one, different pictures show. && done Similar TutorialsHello, I am currently doing a small project on Yahoo - Geocities, and decided to add some Image Rollovers. I keep running into a problem though, and I'm not sure why. I'm not even close to a expert in HTML, which is probably why I'm having a problem. Anyways, could someone give me the HTML text that is involved in making a Image Rollover?... or pointing me to a very detailed tutorial explaining Image Rollovers will suffice. Also, is it true that Rollovers only work with GIF images? Any help is greatly appreciated I'm having a problem trying to anchor this Javascript menu into a fixed position. Heres the website http://www.intuition-designs.com/test1.htm as you might recognize, I'm trying to mimic the Facebook application bar that runs along the bottom of their website I'd like to have the menu anchored to the navbar at the bottom, so when I scroll, the menu will not scroll. I have a separate Javascript file for the menu Here is the HTML for the website so far. ANY HELP IS GREATLY APPRECIATED!!: 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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
}
html.use_scroll_wrapper {
overflow:hidden;
}
#bottom_bar {
position:fixed;
bottom:0;
left: 15px;
right: 15px;
height: 27px;
background:url(http://www.intuition-designs.com/images/midbottom.png) repeat top left;
z-index: 3;
color: #FFF;
text-align: right;
}
#bottom_bar table tr th {
text-align: right;
}
.gg {
text-align: right;
}
.xx {
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="navbar",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="navbar.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>
<div id="bottom_bar"> <table width="50" border="0" align="left" cellpadding="0" cellspacing="0" id="awmAnchor-navbar">
<tr>
<th scope="col"> </th>
</tr>
</table>
</div>
</body>
</html>
THIS PROBLEM IS WITH --IE-- ONLY I have this piece of code that I simplified as much as I could to show a simple example: PHP Code: <table width="50%"> <tr><td colspan="2">short</td></tr> <tr> <td width="128"><img src="" width="110"></td> <td>a<br>a<br>a</td> </tr> </table> <table width="50%"> <tr><td colspan="2">long long long long long long long</td></tr> <tr> <td width="128"><img src="" width="110"></td> <td>a<br>a<br>a</td> </tr> </table> For some reason when long-long-long text is long enough, it pushes a-a-a-a to the right even through one of the cells is limited to 128 pixels.. If I color the backgrounds of the cells in different colors, it is evident that it is the cell pushing, not text-alignment problem Question, why the cell is affected but the upper cell text length even through it is properly col-spanned..? Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
hey guys, im totally new here (hense noobwholoves) because i do, i do love web programming but im just new to it. im in bit of a pickle here, and would really appreciate the help. i have a website with 6 circles in 2 rows of 3 that are all black and im trying to make so that whenever i have the mouse on the a black circle the opposite black circle turns red. for example, when i have the mouse over the first black circle, the last black circle turns red and when i take the mouse out the page goes back to having 6 black circles. so ive tried and but it doesnt seem to be working <a onmouseover="set_src('black_dot1', 'red.jpg')" onmouseout="set_src('black_dot1', 'black.jpg')"> <img src="black.jpg" name="black_dot1"> </a> </td> <td> <a onmouseover="set_src('black_dot2', 'red.jpg')" onmouseout="set_src('black_dot2', 'black.jpg')"> <img src="black.jpg" name="black_dot2"> </a> </td> <td> <a onmouseover="set_src('black_dot3', 'red.jpg')" onmouseout="set_src('black_dot3', 'black.jpg')"> <img src="black.jpg" name="black_dot3"> </a> </td> </tr> <tr> <td> <a onmouseover="set_src('black_dot4', 'red.jpg')" onmouseout="set_src('black_dot4', 'black.jpg')"> <img src="black.jpg" name="black_dot4"> </a> </td> <td><a onmouseover="set_src('black_dot5', 'red.jpg')" onmouseout="set_src('black_dot5', 'black.jpg')"> <img src="black.jpg" name="black_dot5"> </a> </td> <td> <a onmouseover="set_src('black_dot6', 'red.jpg')" onmouseout="set_src('black_dot6', 'black.jpg')"> <img src="black.jpg" name="black_dot6"> </a> </td> </td> </table> </body> </html> http://www.cdf.toronto.edu/~c8khanma...stion_two.html what am i do wrong?? http://img64.imageshack.us/img64/2599/buttons1.jpg Is it possible to make rollovers like that? As in, you hover over an icon and the background image of that div changes. So in general, is it possible to hover over a link and make an image that's somewhere else ( not the background of that link) change? Thanks so much. Hi, I have a bunch of rollover / mouseover buttons for my web site. They work fine when I upload them to my host (freewebs) However, when I redirect using cjb.net's service, all of the rollover buttons don't work anymore. I was wondering if I could get rollovers to work when people are redirected to my site with a .cjb.net subdomain. Thanks! Well, the normal site is http://freewebs.com/clankapow/ and the redirect site is http://clankapow.cjb.net. Notice that the buttons do not turn yellow in the redirect site. I'm sure this question has come up before, but is there a work-around to make animated gif rollovers play more than once in IE? In FF, the rollovers play every time you mouseover (or, they start over). Here is my first attempt at a website from scratch: www.andymcginnis.com. You will see what I mean by rolling over the links. There's kind of like a waterfall effect. Thanks for any reply Im trying to make some links on my website: http://the1337arcade.com But i want them special links, so when people roll their mouse over them, it takes automatically to that page, and then on that page that they automatically go to, i want a back button so they can return to their previous place.. I know this is possible, because i have seen it before.. Please Assist me on this Thanks abunch ANup hello, I am having a problem with some rollover graphics... the file works fine when I view on my local system, but once I upload to the server, the rollovers dont work anymore? I have no idea why... here is a link to the page: http://www.tryfluid.com/keepit/index.html I created the main navigation panel in fireworks. I then cut and paste the info into my site. Here is a link to the actual file that fireworks created: http://www.tryfluid.com/keepit/ARTheader_noSlice.html I am very new to fireworks, I used to use Imageready but recently upgraded to CS4 and Imageready has been discontinued. I can't figure out why the rollovers don't work once I upload the files... any help would be greatly appreciated... Thanks! Allen Hello, I have rollover images (the department blocks) on this page: www.buildersbestdoitcenter.com They work in the preview window of my html editor, and in the IE preview, but they don't work once I post. I'm not a code cruncher, but the error message I get is that there is a missing object. Any help on this would be greatly appreciated. Thanks. KH At the top of http://www.eastofedenevents.com/, the nav buttons all change except the "location" one-- It will not highlight in Firefox, on my Mac. It works fine in Safari, on a mac. Why is this? Thank you. Hey guys, My company is building this website and it seems like we're having quite a bit of trouble with the rollovers and their alignment in Internet Explorer versions before 7. It would be awesome if any of you could give us some insight as to why (other than asking customers to upgrade their explorer or switching to firefox). Another thing is the portfolio section is falling a little too far below the title for a designer's comfort (we're a graphic design studio... not web experts).... how might I be able to fix it? I want to thank everyone who's helped us in the past and hope someone can help us again! Theia Internet is the easiest and lucrative method to promote your business. For this you should have a user-friendly, interactive and professional looking website. This is the first step to start a successful internet marketing process. Those who don’t have websites can ask for web design services from a professional web designing firm. Here are a few important things that you should prepare before contacting a web design firm. Those who are planning to make a website should first create a good portfolio of their works. The portfolio should contain a detailed list of all the happy clients of the company. If the company has a good customer base which can be shown clearly in the portfolio, it would be the best method to advertise the services of the company. You should also give a comprehensive idea about the location of the company and the detailed addresses of the various offices of the company. This will increase the credibility of the company among the visitors. You can prepare detailed pages for the services/products section where you can include all the details related to it. Make it a point to say about the uniqueness that your firm has, as it helps a lot in marketing your products/services. It can be a newest technology or service that you offer, the method of delivery of products/services, or the widespread network that your company has. You can approach a web designer to know more about the things which can be included your website. Hi guys, I have a problem with HTML I've not experienced before relating to include files. I'm running IIS on Windows XP Pro and have an HTML file with a single include (this isn't the actual project I'm working on but a test I picked up off the web to demonstrate the problem) Test.html: - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <!--#include file="testinc.htm"--> <br>To see this work. </body> </html> Testinc.htm: - ************************************************** ***** This is a test ************************************************** ***** When I open, in IE, http://localhost/test.html all I see is the text "to see this work". If I view the source, it is identical to test.html (ie, the include is in the source which would signify to me that it's been picked up as a comment). I've tried replacing Include File with Include Virtual (not that it should make any difference in this case as they're both located in wwwroot) but to no avail. Any ideas what's missing? Cheers in advance. Hi, I am creating a site in HTML using Dreamweaver. I use rollover buttons to navigate the site which are normally grey but white when rolled over. I have found that when I press the BACK button the button I had previously clicked is white and not grey. Try it out for yourself: http://www.RandAM.org/RichardAsh/ Once the problematic button is rolled over it works normally. Is there a way to stop this from happening? thanks, R Hello i have 2 files file 1 and file 2 they are both being included in a cfm file by cfinclude. however when they are viewed on the browser they are not aligned together. file 2 is perfect. it goes on the center of the page but file 1 is on the far left. my level is beginner level so please have patience. i wish to have file 1 on the same center as file 2. (other words, file 1 needs to be inline with file2) thanks once again file 2 is correct. help Hi I am new to this forum and this is my first post. It should be in the introductions area but I thought it would be better here. Ok here is my question. "I have been working on this new website project from my school on really basic HTML. So I created this website with around 12 webpages but am stuck at a place. For a better understanding, here is the picture of the page I am stuck at: http://www.imagebam.com/image/b3124a57239694 (image takes a few secs to load) And here is code for the webpage: http://www.scribd.com/doc/22980588 So by the picture, I hope you understand the problem and suggest a non <div> CSS solution. Thank You All help will be much appreciated I hope someone comes up with a quick and easy idea. I hope to enjoy my stay here Hello all, I am trying to copy a page over to my domain (with permission) and even though it looks ok, the submit buttons / field areas are not working properly. Here is the page I am trying to get working. http://www.ldodds.com/foaf/foaf-a-matic I have grabbed the appropriate .js files and everything in MY header is fine, but like I said.. I can not get the buttons to actually take the data from the fields and spit out the code in the box provided. Any help would be great, thanks! Hello- I'm having a problem with my header. When I first started building this dumb thing, it was in IE7. Everything was looking fine with that, and then I tried to switch to Firefox, and nothing was where it should have been. My doctype wasn't valid, which is now fixed. Anyway, the problem. When I put the header content into the page's html, it displays like it should, but when the header is in a separate file, it leaks down into the main page. HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="Header"> <!--#include virtual="/includes/header.txt" --> <br> </div> <div id="Menu"> <!--#include virtual="/includes/menu.txt" --> </div> <div id="Content"> <h1>Hello!</h1> <p style="text-indent:30px">Welcome </p> <br> <p><b>Jan 14</b></p> <p>The calendar, links, contact us, and 'what to bring' pages are up.</p> <br> </div> <div id=footer> <!--#include virtual="/includes/footer.txt" --> <br> <!--#config timefmt="%B %d, %Y"--> Last Modified: <!--#echo var="LAST_MODIFIED"--> </div> </body> </html> Header: Code: <a href="index.shtml"><img src="cricket_edited.jpg" alt="Home" style="border:none;"></a>    Title CSS: Code: body {
font:15px/20px verdana, arial, helvetica, sans-serif;
color:#336600;
background-color:#FFFFCC;
}
* {
margin:0px;
padding:0px;
}
h1 {
margin:0px 0px 15px 0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#999966;
}
h2 {
font-size:26px;
line-height:0px;
font-weight:700;
color:#999966;
margin:0px 0px 15px 15px;
}
p {
margin:0px 0px 16px 0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
font-size:15px;
text-decoration:none;
font-weight:600;
}
a:link {color:#CC3333;}
a:visited {color:purple;}
a:hover {background-color:white;}
a:active {border:solid 1px #CC3333;}
ul {
list-style-type: circle;
}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:30px;
font-size:30px;
font-weight:bold;
border-color:black;
border-style:solid;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
#Content {
margin:0px 230px 50px 10px;
padding:10px;
background: #FFFFCC;
}
#Menu {
float:right;
padding:10px;
background-color:#eee;
border:3px dotted #336600;
width:150px;
}
.hmenu {
font-size:15px;
font-weight:bold;
text-indent:6px;
}
.sub {
font-size:13px;
text-indent:20px;
}
#Footer {
margin:50px 0px 10px 0px;
padding:17px 0px 6px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:33px;
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#CC9933;
}
Can anyone help? Thanks, Kate |
|||||||