|
HTML - Ie Png Problem. (they Are Inside A Js Slideshow)
Hello,
IE is messing things up for me yet again, lets start with the solutions ive tried: http://homepage.ntlworld.com/bobosola/pnghowto.htm http://koivi.com/ie-png-transparency/ http://www.twinhelix.com/css/iepngfix/ They are all failing? Im guessing its because of the slideshow theyre in.. Could someone give me some advice here? Have a look at the site, in your Internet Explorer ofcourse, here. Thankyou. Similar TutorialsHi Guys on this page www.thepullmanlodge.co.uk/weddings.htm the top 3 pictures are meant to slideshow into each other. When I preview the site in frontpage it works, but now I've uploaded it online it won't work and just shows the three pictures in a block. Can anyone help me get this working as it should? Thanks alot John Hi, for some strange reason when I browse my site in FireFox there is a gap between the navigation buttons and the title image, but in IExplorer it looks perfectly fine. Any ideas? Heres the site: Heres a picture in case some of you don't see the problem or don't have firefox. PS: I'm not sure if the gap is between the table and the other table, or between the table and the image. Thanks for your help. Hi, One of my files is calling an iframe inside a single table. The code looks like following iframe.htm ========================================================================== <html> <head> <title> New Document </title> </head> <body topmargin="0" leftmargin="0" style="overflow:auto"> <table cellpadding="0" cellspacing="0" height="100%" width="100%"> <tr> <td><iframe name="parent_iframe" src="frames.htm" frameborder="0" framespacing="0" height="100%" width="100%" scrolling="yes"></iframe></td> </tr> </table> </body> </html> ========================================================================== frames.htm has following code ========================================================================== <html> <head> <title>Denials Management System</title> </head> <frameset rows="50%,*" border="1" bordercolor="black" marginheight="0" marginwidth="0" framespacing="0"> <frame src="frame_top.htm" scrolling="yes" name="topFrame"> <frame src="frame_bottom.htm" scrolling="yes" name="bottomFrame"> </frameset> <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> </body> </html> ========================================================================== Everything works fine. The only problem is resize functionality doesn't work in 'frames.htm'. After trying few options, I have found that if I remove height attribute from table (height="100%") in 'iframe.htm', resize starts working. But, this shrinks the iframe vertically. I have tried all other options but nothing makes the resize working. I am facing this problem with IE7. It works perfect with Mozilla Firefox 2.0. IE7 doesn't produce any error but the resizing simply doesn't work. Can someone help me please ? Thanks in advance. Regards, Sandeep So I've been trying to set up a search box to blank out its default text when clicked, and reappear when it goes away (if empty). The script works fine--I know that much. However, when using it inside a table inside a form, it seems to fail every single time. Even "this.value=' ' " falls flat on its face. I'm relatively new to HTML, so please bear with me. Below is the script, a text box it does work in, and then the box I'm trying to make it work in. Quote: <script type="text/javascript"> function clickIn(field){ if (field.value==field.defaultValue){ field.value=''; } } function clickOut(field){ if (field.value==''){ field.value=field.defaultValue; } } </script> <form> <input type="text" name="text" id="test" value="test" onfocus="clickIn(this)" onblur="clickOut(this)"/> </form> <form> <tr> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--Search Box Dimensions--> <input type="text" title="Search Terms" name="lookfor" id="search" value="Search the Catalog" onfocus: "clickIn(this)" onblur="clickOut(this)" style="width:300px; border:0px solid; height:50px; padding:0px 3px; position:relative;"/> </td> <td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> <!--The search button--> <input type="image" value="Go" src="Search Button.jpg" style="border-style: none; width: 50px; height: 50px;"/> </td> </tr> </table> </form> I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote There are about 200 photos in a folder d:\photos\. How to make a script to display slideshow of all photos one by one without entering each photo's name? I found a script which displays all photos but need to input all photos' name. I want to create a slideshow, with the pictures rotating at the bottom of my webpage. However, when the page changes it jumps back to the top of the page. Does anyone know how to prevent this? Thanks. <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? I'm making a website for a club in my school. I'm trying to put a slideshow script that has javascript and css into the page, and I've gotten it to fit and everything, but the slideshow isn't functioning. Independently, the slideshow works. Here are the links. It would be great if someone could help me with this. Problematic Site: http://www.freewebs.com/valleykey/new.htm Site without slideshow: http://www.freewebs.com/valleykey/ Slideshow: http://www.freewebs.com/valleykey/1.htm below there is a piece of code with slideshow (I took it from http://www.ricocheting.com/code/java...mage-slideshow). I can see only the first picture, not the rest. Can someone help me? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>try5</title> </head> <body> <script type="text/javascript"> // Author: ricocheting.com // Description: slideshow that allows visitors to flip through a series of images on your website var x=0; function rotate(num){ fs=document.ff.slide; x=num%fs.length; if(x<0) x=fs.length-1; document.images.show.src=fs.options[x].value; fs.selectedIndex=x;} function auto() { if(document.ff.fa.value == "Stop"){ rotate(++x);setTimeout("auto()", 5000);}} </script> <form name="ff"> <table style="border: 1px solid black; border-collapse: collapse;" cellpadding="3"> <tbody> <tr> <th align="center"></th> </tr> <tr> <td align="center"><img src="IMG0.JPG" name="show"> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"> <select name="slide" onchange="rotate(this.selectedIndex);"> <option value="IMG0.JPG"></option> <option value="IMG1.JPG"></option> </select> </td> </tr> <tr> <td style="border: 1px solid black;" align="center"><input onclick="rotate(0);" value="ll<<" title="Jump to beginning" type="button"> <input onclick="rotate(x-1);" value="<<" title="Last Picture" type="button"><input name="fa" onclick="this.value=((this.value=='Stop')?'Start':'Stop');auto();" value="Stop" title="Autoplay" style="width: 75px;" type="button"> <input onclick="rotate(x+1);" value=">>" title="Next Picture" type="button"><input onclick="rotate(this.form.slide.length-1);" value=">>ll" title="Jump to end" type="button"> </td> </tr> </tbody> </table> </form> </body> </html> Hi, i'm trying to design a webpage and I was wondering if there was a way to create a row of pictures that ONLY scroll like a slideshow when the cursor is hovering over the buttons. Is it possible? How? Thanks I want to position my slideshow in the center of the side. the buttons are positioned with css. http://javascript.lima-city.de/ Who can help ? How do I make a slideshow where images roll and when clicked on go to another page? Hi everyone, I'm looking for a html/css script that will allow me to do something similar to the image slideshow on http://trilogyproducts.com/. The Trilogy Products slideshow is in flash, however we were hoping to replicate it in HTML - in particular the fade in and out automated slideshow, PLUS the ability to click on to the little circle navigation and fade out the current shot and fade in the selected shot. Any help would be very much appreciated. Thanks Bec Right, I have started up a gaming website and I need that Headline Slideshow feature implemented soon as. Here is what I'm struggling with: I want to swap the normal action buttons (supplied by the slide generator *liink at bottom) with images I have created. Buttons I want changed too (<)Left button =http://i40.tinypic.com/mrftlc.jpg (>)Right button =http://i39.tinypic.com/5wuo5.jpg I do not want any other action buttons. But I want my images to be placed around the slide like so http://i40.tinypic.com/2176tf.jpg Here is the Code: Code: <!-- configurable script -->
<script type="text/javascript">
theimage = new Array();
// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
theimage[1]=["http://i42.tinypic.com/205tidx.jpg", "http://enj.yolasite.com", ""];
///// Plugin variables
playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set the first slide
SetSlide(0);
//autoplay
PlaySlide();
}
//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
//switch the image
document.images.imgslide.src=theimage[i][0];
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
}
//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}
//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
(code generated from http://www.ricocheting.com/code/java...e-slideshow-v2 if that helps) PLEASE NOTE: We do not want the (>>) (<<) or <PLAY> buttons. Just as above. We would gratefully accept any help - we are really bad with HTML. We have contacted the developer of the code but as of posting there has been no response. Thx. Hello, i am trying to implement a basic slideshow on my website. My code is as follows: <img id="img1" height="500" src="" width="500" /> <a href="javascript:moveToNextSlide()">Next</a> <script type="text/javascript">> var index=31; function moveToNextSlide() { var slideName="slideshowimages/IMG_00" + index++ + ".jpg"; var img1 = document.getElementById("img1"); img1.src = slidename; } moveToNextSlide(); </script> each image is called IMG_00 followed by a number from 31-41 .jpg. when i view the page the image doesn't appear, there is just a small red cross in a white box and the next function doesn't work.Please can someone help me! Cheers, Peter i can open the popup but when i try to open the image i cant see it because he comes to back i want a little help here plz. I am doing a job for school i am a amauter on html http://www.datafilehost.com/download-fc6cb3ce.html I am having problem aligning text next to a javascript slideshow in a table. I can't get text to sit next to the show. It always goes on the top or bottom. Please, any help? Hi all, I cant seem to manage to put links to the slideshow I'm using. http://fifthmammoth.co.uk/slideshow/example4.html This doesn't appear to work: Code: <div id="slide_01">
<div id="myShow-1" class="slide-show">
<div class="slide first">
<a href="pro_scherm/index.html"><img alt="" src="slideshow2/images/slide_01.jpg" width="300" height="200">
<div class="slide-caption">plaatje 1</div></a>
</div>
<div class="slide">
<img src="slideshow2/images/slide_02.jpg" width="300" height="200">
<div class="slide-caption">plaatje 2</div>
</div>
<div class="slide">
<img src="slideshow2/images/slide_03.jpg" width="300" height="200">
<div class="slide-caption">plaatje 3</div>
</div>
</div>
Another thing I'd like to accomplish, to make a link between the slideshow in the mainscreen, and the menubar below. Ideally, if you rollover the slideshow, the matching project in the menubar below lightens. Is it possible to create a rollover effect like this? Your help would be really appreciated! This problem is pretty self explanatory, please have a look here. It shows a slideshow that is almost working, but the moment i add the images they just stack up... not hidden, and not animated. I think ive missed out on something. No idea where to pinpoint it.. thank u for looking into this. |
|||||||