PDA

View Full Version : Random (rotating) images for banner +adjustable image width attribute?


BradS
06-06-2011, 11:45 PM
Hey all

I was searching through the forums and found this amazing solution for random images:
http://www.dreamweaverclub.com/forum/showthread.php?t=39788&highlight=random+image

As if that piece of code shouldn't be sufficiently miraculous, I find myself with the gall to ask for more.

Is there a way to have a % for the random images? I have designed most of my site to scale to however the user is browsing.

From user JohnMoss:
<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner2.jpg' border='0' ALT='Haunted House'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner3.jpg' border='0' ALT='Graves in the Snow'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner4.jpg' border='0' ALT='Insane Joker'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner5.jpg' border='0' ALT='Fangs'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner6.jpg' border='0' ALT='Screaming Clowns'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner7.jpg' border='0' ALT='Dead Servant'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</SCRIPT>

DWcourse
06-06-2011, 11:50 PM
looks like you should be able to use something like this in your CSS.

#randimg {
width: 70%;
}

johnMoss
06-07-2011, 01:20 AM
Agreed, that should work just fine...

BradS
06-07-2011, 06:51 PM
Running with yalls suggestion, I put #randimg in my style.css and called <div id="randimg"> in the html.

The effect was that the image/banner shifted to the right by 100%-|x%| @ width: x% (So if I make the width 100%, it stays put [but does not adapt size when the browser window is adjusted by the user]; if I put it at %50 or %150 it moves over about 245 pixels to the right)

Would you say I am putting the randimg div items in the right place?

(Sorry I don't know all the correct terminology)

johnMoss
06-07-2011, 07:05 PM
Without looking at your code, it sounds like your moving toward your goal by playing with your css settings. Can you get it situated on your page such that when the user adjusts the settings it still is in a readable area without having to adjust a slider?

DWcourse
06-07-2011, 08:49 PM
Whoops, I thought your code already had the randimg id in it but it actually hand name=randimg. If you wrapped a div around your code you'd actually need a #randimg img style. It would be best if you could post your page (even if it's not what you want) and give us a link so we could see everything in place.

BradS
06-08-2011, 06:49 PM
Without looking at your code, it sounds like your moving toward your goal by playing with your css settings. Can you get it situated on your page such that when the user adjusts the settings it still is in a readable area without having to adjust a slider?


Here's the test page: http://www.billstaceyconstruction.com/island.htm

The banner at the top changes every time the page is refreshed (so awesome success there).

I want users to have a variety of screen resolutions, or have their browser in a "restore down" (windows) mode and still have all the content visible without scrolling right and left.

I thought some form of width % would be the top way to get this, but I guess that's just shifting the position.

Thanks so much for the helpful efforts!


Whoops, I thought your code already had the randimg id in it but it actually hand name=randimg. If you wrapped a div around your code you'd actually need a #randimg img style. It would be best if you could post your page (even if it's not what you want) and give us a link so we could see everything in place.

What would it look like in the code to use #randimg img style?

Thanks sincerely.

The CSS:
#header {
position:absolute;
height: 125;
left: 0;
top: 0;
text-align: center;
z-index: 90;
width:100%;
overflow:hidden;
background:#064360;
color:#fff;
}




h1 {
font-family: "New Century Schoolbook", Times, serif ;;
font-size: 100%;
color: #fff;
display: inline;
text-align:left;
}





h2 {
font-family: "New Century Schoolbook", Times, serif ;;
font-size: 100%;
font-weight: bold;
color: #fff;
display: inline;
}




h3 {
font-family: "New Century Schoolbook", Times, serif ;;
font-size: 100%;
font-style:italic;
color: #fff;
display: inline;
}




h4 {
font-family:"Calibri", Garamond, Verdana, sans-serif;
font-size: 110%;
font-weight: bold;
font-style:italic;
color: #fff;
display: inline;
}




h5 {
font-family: "New Century Schoolbook", Times, serif ;
font-size: 100%;
font-weight: bold;
font-style:italic;
color: #fff;
text-align: center;
display: inline;
}




img.floatLeft {
float: left;
margin: 4px;
}




img.floatRight {
float: right;
margin: 4px;
}




#photothumb {
border:.25em solid black;
width:70%;
padding:10px;
background-image:url(biglilbg.jpg);
letter-spacing: 0.02em;
list-style: none;
font-size: 75%;
color: #ffffff;
}




#photothumb li {
text-decoration: bold;
color: #ffffff;
}




#photothumb a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
text-decoration: none;
color: #ADFF2F;
}




#photothumb li a:link {
color: #ffffff;
margin: .2em 0;
padding: 5px 5px 5px 5px;
}




#photothumb a:visited {
color: #FBA16C;
}




#photothumb a:hover {
color: #FF8040;
}




#navlist {
z-index: 55;
position:absolute;
font-family: "Calibri", Garamond, Verdana, sans-serif;
text-align: center;
top: 150px;
width: 135px;
border-style: solid solid solid solid;
border-color: #fff;
border-size: 4px;
border-width: 4px;
font-weight:bold;
letter-spacing: 0.02em;
list-style: none;
}




#navlist li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
text-decoration: none;
}




#navlist li a:link {
color: #ffffff;
margin: .2em 0
padding: 5px 5px 5px 5px;
}




#navlist li a:visited {
color: #ffffff;
}




#navlist li a:hover {
color: #FF8040;
}



#behindimg {
position:absolute;
top:75px;
left:15%;
bottom:0px;
right:15%;
padding: 40px;
overflow:auto;
background:#68a0ca;
z-index: 51;
list-style: none;
}



table {
margin-left:auto;
margin-right:auto
font-family: "New Century Schoolbook", Times, serif ;;
font-size: 100%;
color: #fff;
display: inline;
font-weight:bold;
}




#contents {
position:absolute;
top:25px;
left:15%;
bottom:0px;
right:15%;
padding: 40px;
overflow:auto;
background:#68a0ca;
z-index: 50;
list-style: none;
background-color: #68a0ca;
}

#randimg img{
width:0%;
}

DWcourse
06-08-2011, 07:17 PM
OK, you have some other issues there. But to concentrate on your question, you need to learn about CSS selectors. You added:

<div id="randimg img">

All you need is:

<div id="randimg">

You are giving the div and id, "randimg" and you can't have a space in an id (or give an object two ids).

Then you should create the rule:

#randimg img {
width: 80%;
}

This will make the images (img) within the randimg div a percentage of the width of their parent container (so as the parent resizes, the image will resize with it). You may need to adjust the percentage to get the size you want.

BradS
06-09-2011, 05:22 PM
All you need is:

<div id="randimg">

Then you should create the rule:

#randimg img {
width: 80%;
}

This will make the images (img) within the randimg div a percentage of the width of their parent container (so as the parent resizes, the image will resize with it). You may need to adjust the percentage to get the size you want.

This worked gloriously for firefox, but ie is apparently not hip to the resizing idea. Also, ie occasionally loads the text on top of that banner.

I feel like I should have yall on salary!

CSS:
#randimg img {
width: 95%;
}

HTML:
<div id="contents">


<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="50%" height="25%" scope="col" align="center">
<div id="randimg">
<SCRIPT LANGUAGE="Javascript">

function banner() { } ; b = new banner() ; n = 0
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r01.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r02.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r03.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r04.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r05.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r06.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r07.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r08.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r09.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r10.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r11.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r12.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r13.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r14.jpg' border='0'></A>"
b[n++]= "<A HREF='projectphotos.htm'><IMG name=randimg SRC='rotatingimages/r15.jpg' border='0'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )

</SCRIPT>
</div>

Any ideas for these two issues?

Thanks Sincerely

BradS
06-09-2011, 07:03 PM
^ NVM, that issue is only with the firefox add-on tab, it works smashingly in the original ie. Thanks again for all the help, your input really helped achieve a nice feature!

BradS
07-11-2011, 06:23 PM
Hey yall. I hope you aren't tired of helping me out with this one.

About every dozen reloads, the page content loads about a blank page too low on the main page. When it doesn't, the image flickers at the top.

Y'all know what I might have done or what the code might be doing that's causing it?

http://billstaceyconstruction.com/island.htm

Thanks Sincerely
Brad