HTML - Image Repeat Right

here's my site: gypsysphere.com

I'm trying to get the dates on the posts below to not repeat when they are multiple posts on the same day. Any ideas?

Here's the html:

<div class="datebox">
<div class="date"><?php the_time('d'); ?><?php _e('th'); ?></div>
<div class="month"><?php the_time('M'); ?></div>
<div class="year"><?php the_time('Y'); ?></div>
</div>

And CSS:

.datebox{margin-left:-50px;position:absolute; border-bottom:solid 1px #dcdcdc; margin-top:10px;}
.date{ display:block; width:40px; padding:2px 0px; font-size:17px; font-weight:bold; color:#f2f2f2; background:#222; text-align:center;border-bottom:solid 1px #666;}
.month{ display:block; width:40px; font-size:17px; font-weight:bold; color:#222; background:#cdcdcd; text-align:center; text-transform:uppercase;border-bottom:solid 1px #c5c3c3;}
.year{ display:block; width:40px;font-size:14px; font-weight:bold; color:#222; background:#e7e7e7; text-align:center;}

Thanks

Hi, i have the following problem. I'm working on a site that uses a table. The middle part of the table has a background image that should be stable and should not move, stretch or repeat itself within the table cell.

On top of that backgroundimage are points that when a mouse hovers over it an image specific to that location is deisplayed....the background image being a map and the fixed points specific locations on the map.

I have 2 questions :

1) To fix the background i used :
<table background-repeat:no-repeat="" background="campustour%20flensburg_files/flcampus.jpg" border="0" height="633" width="753">

is that correct ? if so why does it not work and as soon as someone hover over the location the background get's repeated ?

2) Is there a better way to do this interactive map without using tables ?

The site is here :http://www.cartoonorama.de/

Thanks for any suggestions. George

I am trying to create a frame for a page content as shown in the attachment.

As you can see, each column has a pilaster (background which is not repeated) and actually a column which is repeated. Generaly I want to create a code which would work for a content of any length, so I want the columns to be repeated as many times as it is required automatically.

Here is what I tried to do. Of course, this does not work, otherwise I wont ask Do you have Ideas how to make it working?

HTML Code:

<table cellpadding=0 cellspacing=0 border="0">
<tr>
  <td colspan=3 style="background-image:url('top_beam.jpg');background-position:bottom;background-repeat:no-repeat;">
  </td>
</tr>
<tr>
  <td style="background-image:url('left_pilaster.jpg');background-position:right;background-repeat:no-repeat;">
  </td>
  <td rowspan=2>
	ACTUALLY THE CONTENT
  </td>
  <td style="background-image:url('right_pilaster.jpg');background-position:left;background-repeat:no-repeat;">
  </td>
</tr>
<tr>
  <td style="background-image:url('left_column.jpg');background-position:right;background-repeat:repeat-y;">
  </td>
  <td style="background-image:url('right_column.jpg');background-position:left;background-repeat:repeat-y;">
  </td>
</tr>
<tr>
  <td colspan=3 style="background-image:url('brick_floor.jpg');background-position:top;background-repeat:no-repeat;">
  </td>
</tr>
</table>

Hi all,

I sold an ad on my blog and they want it placed beneath each individual post. I know where to place the code within my template to make that happen, BUT they only want it to appear under the top 3 posts, not every single post. I'm assuming there is some sort of "no repeat" or "limited repeat" code I can use, but my skillz do not venture that far. Can anyone offer any help?

Thank you!!

www.yankeeschick.com

I have created a menu bar that runs horizontally along the top of my website (not as a frame) and repeats across every webpage.

I was just wondering if it was possible to insert some shorter code that referenced a text file that contained the menu bar code so that I would not have to put my menu code on every page.

I'm thinking something in CSS might do it, but I'm not sure.

Thanks.

how do you get music to repeat itself over and over.
and to auto play?



here is the code

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="13" height="13" allowNetworking="internal"> <param name="wmode" value="transparent"> <param name="allowScriptAccess" value="sameDomain" /><param name="FlashVars" value="resourceID=97664201&flp=false" /> <param name="movie" value="http://static.last.fm/webclient/inline/1/inlinePlayer.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><embed wmode="transparent" src="http://static.last.fm/webclient/inline/1/inlinePlayer.swf" quality="high" FlashVars="resourceID=97664201&flp=false" bgcolor="#ffffff" width="13" height="13" name="inlinePlayer" allowNetworking="internal" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <a href="/music/Linkin+Park"></a><a href="/music/Linkin+Park//Wake"></a>



problem is i dont know how to make it repeat
and i dont know how to make it autoplay


i would be very gratefull for any help given

I've been writing this xhtml/css page and ive run into a problem. It should be a bit confusing to explain but ill try. Basically i want a nav bar on the left side, one solid color going from top to bottom, and then text next to this. So i have a div tag for the nav bar that ive set with css to have a height of 100%. the text however, makes the page too big and thus it has to scroll. But when I scroll down the nav bar is gone. By that I mean it doesnt repeat past where I can see on the page before scrolling. How would i make the nav bar go ALL the way to the base of the page?

I am trying to use two different repeat bg images for right and left side. I want them to repeat on 'x-repeat' coordinated and they are going to be on the right-left side of the .swf , Here is my code;

<html>
<head>
<title>SeanDon.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">

body {
background-color: #aef0ff;
}

.leftRepeat
{
background-image: url( 'images/index_01.jpg' );
background-repeat: repeat-x;
}

.rightRepeat
{
background-image: url( 'images/index_03.jpg' );
background-repeat: repeat-x;
}

</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (SeanDon_web_illustration 950x650 b.ai - Slices: 01, 02, 03) -->
<table id="Table_01" width="950" height="650" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="30%" height="652" class="leftRepeat"> </td>
<td align="center" valign="top">
<div align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" height="650" title="SeanDon">
<param name="movie" value="index.swf">
<param name="quality" value="high">
<embed src="index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="950" height="650"></embed>
</object>
</div>
</td>
<td width="30%" height="652" class="rightRepeat" ></td>
</tr>

</table>
<!-- End ImageReady Slices -->
</body>
</html>

Hi

I have tried a lot of things and search the internet for hours regarding this matter... My image background doesn't reapeat in Internet explorer however works fine in any other browsers such as google chrome and firefox. Can you please help me get this fixed? I am new to xhtml and css and really it's really frustrating having this kind of problem.


Thank you

Website Link: www.pjrazon.co.uk/newlayout/index.html

screenshots if it helps:





CSS:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCCCCC;
}

a:link { color: #ffffff;
text-decoration: none;
}
a:visited {text-decoration: none;}
a:hover {color: #b23937;}
a:active {text-decoration: none;}

#wrapper {
width: 1151px;
margin-right: auto;
margin-left: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #999999;
border-left-color: #999999;
}
#wrapper #logo {
height: 120px;
width: 1151px;
}
#wrapper #navigation {
background-image: url(../images/nav.home.gif);
height: 32px;
}
#wrapper #navigation #navlabel {
color: #FFFFFF;
padding-top: 5px;
padding-left: 125px;
}
#wrapper #navigation #navlabel #nav li {
display:block;
width:100px;
float:left;
list-style:none;
}
#wrapper #header {
height: 391px;
background-image: url(../images/welcome.jpg);
}
#wrapper #mainContent {
height: 384px;
background-image: url(../images/maincontent.jpg);
width: 1151px;

}
#wrapper #bodyArea #footer {
background-image: url(../images/footer.jpg);
height: 73px;
clear: both;
}
#wrapper #bodyArea {
background: url(../images/bg_bodyarea.jpg) repeat-y;

}
#wrapper #bodyArea #mainContent #content {
display:block;
width:400px;
float:left;
}
#wrapper #bodyArea #mainContent #contentwrapper {
padding-left: 140px;
padding-top: 70px;
}

HTML:
<!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=UTF-8" />
<title>Perfect Vision</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="logo"><img src="images/header.jpg" alt="logo" /></div>
<div id="navigation">
<div id="navlabel">
<ul id="nav">
<li><a href="homepage.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

<div id="header"></div>

<div id="bodyArea">
<div id="mainContent">
<div id="contentwrapper">
<div id="content">
<p>August 10 2010</p>
<p>&nbsp;</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam semper turpis in tortor interdum sed mattis lectus mollis. Pellentesque laoreet quam et mauris feugiat sit amet eleifend turpis imperdiet. Praesent condimentum libero vitae massa imperdiet pellentesque. Vestibulum et risus dolor, ac tincidunt velit. Maecenas lobortis diam tellus. Suspendisse auctor, velit ut imperdiet semper, erat orci pharetra tortor, venenatis vulputate metus eros ut felis. Cras ullamcorper odio sed felis ornare ultricies. Phasellus porta adipiscing aliquet. Aenean ligula tellus, blandit a pulvinar in, fermentum a erat. Sed arcu nisl, porta eu vestibulum at, luctus sed tellus. Aenean eget quam justo, quis ultricies ante. Vivamus tempor sollicitudin augue ut rhoncus. Sed odio mauris, imperdiet ut elementum vitae, dapibus at quam. Nullam in aliquam sem. Fusce consectetur laoreet elit, non consequat nunc tempus nec. Cras at enim ipsum. Praesent ipsum purus, tempus non sagittis volutpat, fringilla eget mi. Maecenas sed elit est. Morbi facilisis purus eget nunc tincidunt iaculis mattis quam pellentesque. </p>
<p> Sed tortor leo, laoreet sit amet mattis a, fermentum in ligula. Sed tempor lacus a lorem fermentum fermentum semper nunc sagittis. Vivamus et est porta purus mollis cursus eget in ante. Sed lacinia, diam in tempor suscipit, turpis enim posuere turpis, sit amet vestibulum quam nulla id elit. Vivamus ultricies tempus mi, non consequat velit mollis id. Curabitur vehicula, turpis id tempor condimentum, sem nulla molestie enim, vel commodo metus ipsum non nisi. Aliquam erat volutpat. Fusce venenatis porttitor massa eget suscipit. Sed purus turpis, iaculis id sollicitudin id, vulputate sit amet velit. Suspendisse sed velit non tellus eleifend venenatis vehicula ut elit. Integer sit amet ullamcorper nulla. </p>
<p> Vestibulum dictum ante eu nisl ornare tincidunt. Etiam id risus mauris. Duis nec turpis in neque porttitor euismod sed id odio. Sed molestie urna a magna fermentum egestas. Nulla facilisi. Quisque risus neque, sodales pulvinar rhoncus a, lacinia eget neque. Vivamus vel malesuada nisl. Proin mollis tempor felis id dapibus. Morbi velit mi, aliquet sed malesuada et, blandit vitae eros. Nulla nec lorem quam, eu aliquam sapien. Quisque venenatis, enim non ultricies lobortis, lectus dolor consectetur nulla, eu tincidunt metus enim vitae libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent sit amet neque eu libero commodo condimentum. Fusce hendrerit diam sed libero lacinia nec adipiscing massa posuere. Pellentesque eget libero risus, eget venenatis metus. Morbi quis dolor enim. Cras orci orci, ultrices nec consectetur sed, auctor non leo. Aliquam nec sem erat. Nam ut nunc sed leo tempor pretium. Maecenas sit amet tortor a neque congue iaculis eu in ipsum. </p>
</div>
</div>
</div>

<div id="footer"></div>
</div>


</div>
</body>
</html>

I have this task as part of an HTML class project.

It has to be done using the <embed> tag, and must repeat a wav file twice (playing it three times total).

This is the code I'm using:

<p>
<embed src="background.wav"
width="145" height="100" hidden="true" autostart="true" playcount="3" loop="3" />
</p>

It doesn't loop at all in firefox, and in IE it loops constantly. If I remove the loop="3" attribute, it works properly in IE.

Is there any way to get this working across browsers using the embed tag, or would a more complex method be needed? (such as javascript browser detection with browser specific code).

I'm really stuck on this, any help would be really appreciated.

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

So in January 2006 I posted a question about "making two buttons in one"



3 years and 5 months later i am happy to announce that I have found a solution.

Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A'

All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find.

HTML Code:

<html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>

<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

</head>

<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>

I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless.

Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method.

So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses.

here is the awesome code:
Code:

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}

I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect.

Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space.

So here is how I used the above to JavaScript to make a simple onclick image toggle:

HTML Code:

<img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">

Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers.

So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons:

Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow...



The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality.

So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool.

So here's the basic code for a rollover:
HTML Code:

<img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>

To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily.

So, back to the on/off button here is how you would code it using showHide with rollovers.
HTML Code:

<img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')"  style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">

So here is what is going on:
you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene?

Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers...

But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see.

Hey guys. I need a little help with my HTML image rotator.

Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
	<title>...</title>
	<style>
		#sliderwrap {
			height: 403px;
		}
		#sliderleft {
			width: 10px;
			height: 100%;
			float: left;
			background: #efefef;
			border: 1px solid #ccc;
		}
		#sliderleft div {
			height: 100px;
			border-bottom: 1px solid black;
		}
		#slidercontent {
			position: relative;
			width: 650px;
			height: 100%;
			float: left;
			border: 1px solid black;
			overflow: hidden;
		}
		#sliderimages {
			position: absolute;
			-webkit-transition: all .5s ease-in-out;
			-moz-transition:    all .5s ease-in-out;
			-ms-transition:     all .5s ease-in-out;
			-o-transition:      all .5s ease-in-out;
			transition:         all .5s ease-in-out;
		}
		#sliderimages img {
			display: block;
		}
		.s0 #slide0,
		.s1 #slide1,
		.s2 #slide2,
		.s3 #slide3 {
			background: #ccc;
		}
		.s0 #sliderimages {top:     0  }
		.s1 #sliderimages {top:  -500px}
		.s2 #sliderimages {top: -1000px}
		.s3 #sliderimages {top: -1500px}
	</style>
	<script>
		var slide = 0;
		var interval_id = 0;

		function stop_timer() {
			clearInterval(interval_id);
			if (this.getAttribute("data-slide")) {
				slide = parseInt(this.getAttribute("data-slide"));
				document.getElementById("sliderwrap").className = "s" + slide;
			}
		}

		function start_timer() {
                        clearInterval(interval_id);
			interval_id = setInterval(
				function() {
					slide = (slide + 1) % 4;
					document.getElementById("sliderwrap").className = "s" + slide;
				},
				3000
			);
		}

		window.onload = function() {
			start_timer();
			var el = document.getElementById("slidercontent");
			var divs = document.getElementById("sliderleft").getElementsByTagName("div");
			for (var i = 0; i < divs.length; i++) {
				divs[i].onmouseover = stop_timer;
				divs[i].onmouseout = start_timer;
			}
			el.onmouseover = stop_timer;
			el.onmouseout = start_timer;
		}
	</script>
</head>

<body>
	<div id="sliderwrap" class="s0">
		<div id="sliderleft">
			<div id="slide0" data-slide="0"></div>
			<div id="slide1" data-slide="1"></div>
			<div id="slide2" data-slide="2"></div>
			<div id="slide3" data-slide="3"></div>
		</div>
		<div id="slidercontent">
			<div id="sliderimages">
				<img src="http://i.imgur.com/8iWz6.jpg">
				<img src="http://i.imgur.com/1d2U6.jpg">
				<img src="http://i.imgur.com/8iWz6.jpg">
				<img src="http://i.imgur.com/1d2U6.jpg">
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</body>
</html>

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?