|
HTML - Showing A Random Image
How would i show a random image? When people come onto my site, i want the header to be random out of about, 6 different ones. When you refresh the page, it changes the image. (for more explaingin, ha) How would i go about doing this?
Similar TutorialsHi... I'm a bit new to HTML & Photoshop So I'm not sure if I'm on the right place.. Anyway I know a few things about HTML and CSS... Also about Photoshop... I have been making some not awesome but good designs for blogs. I stopped a while ago since I kind of got bored at the time. For the last week I got a few new ideas and since then I'm planing a big come back. Anyway in the ideas I'm thinking of making a blog whos picture will be randomly selected among some of the ones I uploaded somewhere on then net. So I'm actualy looking for some type of a script that I could insert somewhere in the code that will somehow randomly select a link of lets say 3 links and then insert it somewhere else in the code. Or in more simple way ( i tend to complicate things ) I'm looking for something that will select a random picture from thoes to which I have links added in the code and then show it on the desired place as a backgraund and so on. I hope you understood me well (my English isn't the best too) and I hope to have an answer soon... Thank you in advance... Hello, this is my first post, and I'm looking for a bit of help. I am a beginner. I bought webspace and have designed a site to put up there. I made it all and wrote the code and it all ran fine locally, then I uploaded it and things started looking a bit funny. The site is at http://www.kaleidoscope-eyes.co.uk There are a few problems : 1. There is chinese (or korean or something) writing in the main window randomly all over the place 2. It's not picking up the info from my stylesheets on the main page for the body text, it's black rather than yellow, but shows up in other pages, and the code is the same. 3. Only the first page is transparent, the others are giving a white background, even though I copy-pasted the code to do it for all the pages. Anyone have any ideas what I've done wrong? I'm not sure if this is an IE issue, css, html... I have all icons and images showing a broken image" red X OVER the actual image? I've never seen this on any other sites or even on any other sites i've done. They are all .png images but I use .png files successfully all the time? Anyone encounter this? Here's the HTML surrounding the image file: HTML Code: <div class="header logo2"> <!-- Logo begins here --> <a href="index.php" title=""><img src="images/logo.png" alt="" /></a> </div> <!-- END Logo --> Here's the CSS surrounding the image with no other images or backgrounds being called??? HTML Code: .header {
height: 41px;
}
.logo2 { text-align: right; }
See Image Attached... Hi there, I have created a site that can be viewed at www.prestigeinteractive.com/legacy2 On this site I have utilized a basic two column design with both a header and a footer. You may need to look at the first page to know what i am talking about. Upon creating the site I wanted to make the athletes on the page extend beyond the borders of the site's wrapper. In order to do that and maintain reasonable filesizes, I opted to splice the images. I used a jpeg for the large part within the wrapper, and used a png in a absolute positioned div for the parts that are to extend beyond the site's wrapper/container (needed a transparent image to display the border and site's background properly). The friend I am making the site for asked if I could set it up so that there can be a number of images that randomly load when a user enters the home page. I am not sure it that is possible using the format I've implemented (2 images properly aligned). Can this be done? I've done it before with single images within a div tag, but not two that need specific coordinates to appear aligned correctly. If "yes this can be done", could someone kindly point me in the right direction to find a tutorial on this. If not, I'd appreciate knowing this as well, as I'll need to come up with an alternative plan. Thank you for your time, G Okay... Here is what I'm trying to do...and not really sure as an HTML novice where to even start. I have something called a 'blogwall' on my site, it's url is he http://www.weusecoupons.com/index.php?pageid=blogroll What I would like to do, is on the main page: www.weusecoupons.com Have a ONE of the 125x125 buttons appear randomly. Is this a simple thing? All images are hosted locally!! Thanks for your help. Hello, I'm sure the subject about random generators must have been asked a billion times before, but I can't seem to find an answer for my set up. Basically I have a style.css sheet which defines some images like this: #gallery .pic01 { background: url('images/gallery_images/pic_01.jpg') no-repeat; width: 205px Then in my html I have a list of these images like this <div id="gallery"> <ul> <li class="pic01"></li> <li class="pic02"></li> <li class="pic03"></li> </ul> What I'd like to do is have the pictures choosen randomly so that each time the page loads you get a different set of pictures. Is this possible. Please forgive me if this is easy peasy to do - I'm a real html thicky! Hello everyone, I'm new here and currently reaquainted with HTML as I'm trying to help out a friend with his website. I am trying to randomize a background image in a table and I can't seem to get anything to work. I have searched up and down this forum and others, have tried several scripts that seem to work for others, and I'm still at square one. I most recently tried a script I found here on this forum with no success. Here is my code... 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>
...
...
<script type="text/javascript">
<!--
var pic=new Array();
pic[0]="img/home_back1.jpg";
pic[1]="img/home_back2.jpg";
pic[2]="img/home_back3.jpg";
var num=Math.floor(Math.random()*pic.length);
window.onload=function() {
document.getElementById('wrapper').style.backgroundImage='url('+pic[num]+')';
}
//-->
</script>
</head>
<table id="wrapper" width="955" height="600" align="center" border="0" cellpadding="0" cellspacing="0" >
...
...
...
</table>
</body>
</html>
If anyone has any insight as to what I may be doing wrong or how I can fix this it would be much appreciated as I'm pulling my hair out trying to get this to work. Thanks! Unclejunebug I want to display an imagw which is an Icon. When I view it with IE noi mage. When I view the page with Firefox, it works fine. Does IE require something else? Here is the code I am using. <img src=./graphics/c3.ico HEIGHT="40" WIDTH="40"> Hi, I designed and sliced my website in Photoshop CS4 and then tweaked the code as needed in Dreamweaver CS4. Can someone tell me why the image (seen below) isn't showing up on my company's web page, supposed to be on bottom left of my web page: http://www.majorleaguemotoring.com? I'm guessing it has something to do with the iframe code from Facebook? http://www.majorleaguemotoring.com/i...industries.gif Hello All, I am a nubie to HTML. On this website: http://www.shareselfhelp.org/ After the first "Get Free Monthly Meeting Directory by Email" The E shows up. But on the second: "Get Free Monthly Meeting Directory by Email" The E is not visible. It is there, I can click on it. Right next to the word Email. If I click on it and hold the button down, I can see the little square dotted line box, outlining the image, but I can't see the image. Thanks in Advance, Laurence I am working on the site rachelsnotary.com and I cannot get the images in 6 of the divs to show up. The other ones all look fine and work fine, but those couple dont work in IE (they do work in firefox though). Any advice? Its probably best to look at the site to see what I am talking about. thanks in advance! Hi Team, I placed this html code into my web editor by first uploading and saving the image as a .png file. Here is the code I used: <a href="http://www.awin1.com/cread.php?awinmid=2208&awinaffid=107642&clickref=&p=http%3A%2F%2Fwww.1staudiovisual.co.uk%2Fcatalog% 2Fsamsung-ue46b7020ww-inch-p-7066.html"><img src="1stAudioVisual.png" alt="IstAudioVisual.png" title="Samsung UE46B7020WW" /></a> As you can see I put the img src in the same way that I saved it in my files..When I go to the page it comes up without the image and just says what's written in the alt section How do I get the image to show up? Thanks. Sunil. Im using an email newsletter with a few inline css styles. I have a side background and looks like this <td width="145" valign="top" background="http:www.etcetc.com/images/BLsidegrey.gif"></td> NOW.this shows up fine in web based email like hotmail and gmail. HOwever the w3c validator says it not right to use the background part etc. So i tried the format below <td width="145" valign="top" style="background: url('http://www.etcetc.com/images/BLsidegrey.gif')" ></td> and the validator says great! ure html code is good. But the browser based emails dont show the image.However, when i download it to my mail program the image shows up. So im taking its the web based emails that r having an issue with it since most ppl just read it online and in their mail programs like outlook etc I even tried the bottom creating a seperate style and same issue and they dont show up. also i create a table in my newsletter and the text seems to be squishing to the sides of my coloumns in gmail. hi all, I'm trying to just put an image in a table but for the life of me can't see where i've gone wrong. here is the code: <table id=table1 align=center background=weddingband/weddingcard.gif></table> The image is in the corresponding folder. this is the css: #table1 { border: )0px solid blue;} #table1 td{ border: 0px ;} help appreciated, thanks, r Hi, I'm probably missing something really obvious, but I'm having a stumbling block on why for this page, you can see the image with the wreath when viewing it in Firefox, but not in Internet Explorer. I always use Firefox, but my bosses tend to use IE 6, so they were confused on why they couldn't see the image today. I also can't see the image in IE 7. Hi all, first post so please be kind! I have a toy and comic fansite here http://www.bloodforthebaron.com I have just discovered that my IMG BORDER="3" code is not working in Internet Explorer and AOL, please view using Firefox for the proper version. Please could someone advise? Don't worry about being patronising, I am self-taught and oftimes dense. Hi guys Just joined and hoping someone can offer some advice on an issue. I want a black border around images which show up jsut fine in IE but some reason the border does not appear in FF. The below is an example of what i am doing. <IMG STYLE="position:absolute; TOP:110px; LEFT:610px; WIDTH:180px; HEIGHT:190px" src="Optimized-027edited.jpg" style="border-style: solid; border-color: black;"/> Does anyone have any advice on where what I can do to make the border show up in both browsers? Any help appreciated. Cheers Hi. Not sure if this should go in HTML thread or FLash Dev, but here goes.... I have made some movies in flash, but i understand that people with old versions of flash player, will not be able to see them. Is it possible to show an image instead of the flash movie if the recommended flash player is not installed?? i.e. my movies are 320px height and 426px wide, if the flash player is not installed i would like to show a photo (320px * 426px) instead. Thanks Leroy Hi! I have just reuploaded my site, which contains 3 image flips, and I am only seeing the outline of where the images should be in both Safari and Internet Explorer. This is strange because before re-uploading, this functioned just fin. Any ideas? Thanks! Here is the problem area: http://www.lolaandcricket.com/loe/index.html Hi all -- I'm having a problem. I have a series of 8 images that make up my navigation bar for the website I'm making. Each image has an <a href=" ... > </a> tag around it. I have zeroed out all of the padding/margins/borders on all of the images (in CSS and HTML). The problem I'm having is that a 2-3px padding is showing up to the left of each image, but only in Internet Explorer. Firefox and Chrome do not show the padding. To clarify, I DO NOT want the padding to be displayed. Here is my 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/nav/blue/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 */
padding: inherit
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
padding: 0px;
border: 0px;
}
.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;
}
a img {
border:none;
padding:0;
margin:0;
float:left;
}
a:link {
color: #009;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000053;
}
a:hover {
text-decoration: underline;
color: #009;
}
a:active {
text-decoration: none;
color: #009;
}
-->
</style>
and the <img src=" ... "> code: Code: <!-- MAIN NAVIGATION BANNER -->
<!--HOME-->
<a href="index.php"><img src="images/nav/blue/home_select.png" alt="home" name="home" width="82" height="30" border="0" id="home" onmouseover="document.images.home.src='images/nav/blue/home_over.png'" onmouseout ="document.images.home.src='images/nav/blue/home_select.png'"/></a>
<!--PROGRAMS-->
<a href="programs.php"><img src="images/nav/blue/programs.png" alt="programs" name="programs" width="111" height="30" border="0" id="programs" onmouseover="document.images.programs.src='images/nav/blue/programs_over.png'" onmouseout ="document.images.programs.src='images/nav/blue/programs.png'"/></a>
<!--SCHEDULE OF EVENTS-->
<a href="schedule.php"><img src="images/nav/blue/scheduleofevents.png" alt="schedule of events" name="scheduleofevents" width="189" height="30" border="0" id="scheduleofevents" onmouseover="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents_over.png'" onmouseout ="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents.png'"/></a>
<!--CONTACT US-->
<a href="contact.php"><img src="images/nav/blue/contactus.png" alt="contact us" name="contactus" width="119" height="30" border="0" id="contactus" onmouseover="document.images.contactus.src='images/nav/blue/contactus_over.png'" onmouseout ="document.images.contactus.src='images/nav/blue/contactus.png'"/></a>
<!--DOWNLOADS-->
<a href="downloads.php"><img src="images/nav/blue/downloads.png" alt="downloads" name="downloads" width="267" height="30" border="0" id="downloads" onmouseover="document.images.downloads.src='images/nav/blue/downloads_over.png'" onmouseout ="document.images.downloads.src='images/nav/blue/downloads.png'"/></a>
<!--FACEBOOK-->
<a href="javascript:void(0)"
onclick="window.open('http://www.facebook.com/pages/Delhi-NY/Delaware-County-Public-Health-Nursing-Service/247460644781?ref=ts')"><img src="images/nav/blue/facebook.png" alt="facebook" name="facebook" width="90" height="30" border="0" id="facebook" onmouseover="document.images.facebook.src='images/nav/blue/facebook_over.png'" onmouseout ="document.images.facebook.src='images/nav/blue/facebook.png'"/></a>
<!--TWITTER-->
<a href="javascript:void(0)"
onclick="window.open('http://www.twitter.com/dcphns')"><img src="images/nav/blue/twitter.png" alt="twitter" name="twitter" width="67" height="30" border="0" id="twitter" onmouseover="document.images.twitter.src='images/nav/blue/twitter_over.png'" onmouseout ="document.images.twitter.src='images/nav/blue/twitter.png'"/></a>
<!--BLOGGER-->
<a href="javascript:void(0)"
onclick="window.open('http://dcph.blogspot.com')"><img src="images/nav/blue/blogger.png" alt="blog" name="blogger" width="75" height="30" border="0" id="blogger" onmouseover="document.images.blogger.src='images/nav/blue/blogger_over.png'" onmouseout ="document.images.blogger.src='images/nav/blue/blogger.png'"/></a>
I know it's a bit of a mess.. but regardless, I cannot figure out why this happens.. any ideas? |
|||||||