|
JavaScript - Multiple Image Swaps On Same Page
I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/
I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. Similar TutorialsHi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? http://www.pennonconstruction.com/projects.php I'm trying to rotate an array of images (including different urls the images are linked to). The two images below "Featured Projects" are the images that should be rotating with an array of different images/links. I know this can be done in a fairly simple way, I'm just having a hard time finding something that is simple and works. Any help is much appreciated! Hello, I am trying to have 4 different images change when the user hits the start button. The speed they change in is based on what selection they have chosen (fast = every second, med = 3 sec, slow = 5 sec), and this cycle repeats until the user has hit the stop button. However, I am struggling to get this to work and have looked around the web for help, but cannot find it. <html> <head> <title>Untitled</title> </head> <body> <img src = "pic1.jpg" id = "swapper"> <form name = "form1"> <input type = "button" value = "Start" onclick = "Swap()"> <input type = "button" value = "Stop" onclick + "Stop()"> Speed: <select name = "Speed"> <option>Slow</option> <option>Medium</option> <option>Fast</option> </select> </form> <script language="JavaScript" type="text/javascript"> var Images = array["pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg"]; function Swap(){ } function Stop(){ } //clear it: clearInterval(imageSwapInterval); </script> </body> </html> I have not included any attempt of a code for the functions because I have tried at least 8 different things and have failed to get it to properly work each time. Also the array I set up does not work either. Thank you for the help and your time, Crimmm I have built a webpage that is all one template and the use of an iframe to change the content and not reload the page graphics every time. The way the page is laid out is a background image in the farthest back table behind another table of a background image that is transparent and over lays the bottom table image. I want the menu buttons; with the existing rollover image for them alone, to change the bottom layer background image "on click". The only code sources i have found will swap images in the same table area and not to any image existing in the entire document. thanx I'm trying to create two array's on this page: http://www.hollywoodfarmer.com Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble. The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (pls ignore the terrible formatting of the 2nd pic). I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables. Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all. Any help would be greatly appreciated. Your forums have gotten me this far! So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well. The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png";
downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png";
}
if (document.images) {
downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png";
downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//--></script>
and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;"
onMouseUp="releaseButton('downloadbtn');return true;"
onMouseOut="releaseButton('downloadbtn');return true;"
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;"
onMouseUp="releaseButton('downloadbtn2');return true;"
onMouseOut="releaseButton('downloadbtn2');return true;"
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> I'm using this tooltip on my site: http://craigsworks.com/projects/simpletip/, I want to display some information about the user when someone hovers mouse on his/her username. This is the code I use to call simpletip: Code: $(document).ready(function(){
// Create your tooltips
var api = $(".ttip a").simpletip().simpletip();
api.load('user.php');
});
The problem is that I want to determine the user id in order to retrieve according information from database. As I see from this code the address that should be call onmouseover is determined in advance. Is there a way to send some parameters (user id in this case) in user.php file according to which link is hovered? Hope I'm clear. I would like multiple videos one one page. I tried to give each one an individual id but failed miserably. Also how on earth do I assign a image to each player. My example works with one player only and falls back to HTML5 video with no problems . If I decided on five videos per page, how do I apply an id to each one as well as a different image per player. Here is what I have so far: Code: <script type="text/javascript" src="video/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.src = "http://www.mysite.com.mp4";
flashvars.controlBarMode = "floating";
flashvars.poster = "http://mysite.com/imageonplayer.png";
var params = {};
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
attributes.id = "videoDiv";
attributes.name = "myDynamicContent";
swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", "487", "275", "10.1.0","expressInstall.swf", flashvars, params, attributes);
</script>
</head>
Code: <div id="videoDiv"> <video controls="controls" poster="http://mysite.com/imageonplayer.png" width="487" height="275"> <source src="http://www.mysite.com/mymovie.mp4" type="video/mp4" /> <source src="http://www.mysite.com/mymovie.ogg" type="video/ogg" /> </video> </div> I assigned each player an individual id like this as suggested on another thread but that didn't work. Any suggestions? : Code: <script type="text/javascript">
swfobject.registerObject("videoDiv1", "10.1.0");
swfobject.registerObject("videoDiv2", "10.1.0");
swfobject.registerObject("videoDiv3", "10.1.0");
swfobject.registerObject("videoDiv4", "10.1.0");
</script>
Thanks Dan Hi all, I am a complete novice to pretty much everything internet but have managed to put together a site that I am trying to get off of the ground. Here is the problem that I am having. The first script below is for a script that shows up in my sidebar and is available on every page of my site. The second script is one that I intend to use on only one specific page. Both of the scripts function properly on their own but not when I try to use them as intended. As mentioned in the FAQ, I tried to name all of the variables with unique names but that still does not work. Any suggestions would be greatly appreciated!! This code is in my sidebar on every page: Code: <script type="text/javascript">
<!--
function calculate() {
var doc = document.pointCalc;
var points = 0;
var fiber = doc.fiber.value;
var fat = doc.fat.value;
var calories = doc.calories.value;
points = (calories / 50) + (fat / 12) - (fiber / 5);
doc.result.value = Math.round(points);
}
// -->
</script>
<center>
<br/>
<br/>
<div class="storyTitle"><b>Approximate Points Calculator</b></div>
<div class="storyContent">
<form name="pointCalc">
<table><tr>
<tr><td>Calories:</td><td><input name="calories" type="text"/></td></tr>
<tr><td>Fat:</td><td><input name="fat" type="text"/></td></tr>
<tr>
<td>Fiber:</td>
<td>
<select name="fiber">
<option value="0"/>0
<option value="1"/>1
<option value="2"/>2
<option value="3"/>3
<option value="4"/>4 or more
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="calculate();" type="button"/></td></tr>
<tr><td>POINTS:</td><td><input name="result" type="text"/></td></tr>
</tr></table>
</form>
</div></center>
This code I'm trying to use on just one page of the site: Code: <center><script type="text/javascript">
<!--
function getpoints() {
var doc1 = document.pointquiz;
var dpoints = 0;
var sex = doc1.sex.value;
var age = doc1.age.value;
var weight = doc1.weight.value;
var height = doc1.height.value;
var activity = doc1.activity.value;
var nursing = doc1.nursing.value;
dpoints = (sex * 1) + (age * 1) + (weight * 1) + (height * 1) + (activity * 1) + (nursing * 1);
doc1.dresult.value = Math.round(dpoints);
}
// -->
</script>
<br />
<br />
<div class="storyTitle"><b>Daily Point Allowance Quiz</b></div>
<div class="storyContent">
<form name="pointquiz">
<table><tr>
<tr>
<td>Sex:</td>
<td>
<select name="sex">
<option value="2" />Female
<option value="8" />Male
</select>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<select name="age">
<option value="4" />17-26
<option value="3" />27-37
<option value="2" />38-47
<option value="1" />48-58
<option value="0" />58+
</select>
</td>
</tr>
<tr>
<td>Weight:</td>
<td>
<select name="weight">
<option value="10" />100-109
<option value="11" />110-119
<option value="12" />120-129
<option value="13" />130-139
<option value="14" />140-149
<option value="15" />150-159
<option value="16" />160-169
<option value="17" />170-179
<option value="18" />180-189
<option value="19" />190-199
<option value="20" />200-209
<option value="21" />210-219
<option value="22" />220-229
<option value="23" />230-239
<option value="24" />240-249
<option value="25" />250-259
<option value="26" />260-269
<option value="27" />270-279
<option value="28" />280-289
<option value="29" />290-299
<option value="30" />300-309
<option value="31" />310-319
<option value="32" />320-329
<option value="33" />330-339
<option value="34" />340-349
<option value="35" />350-359
</select>
</td>
</tr>
<tr>
<td>Height:</td>
<td>
<select name="height">
<option value="0" />Under 5'1"
<option value="1" />5'1" to 5'10"
<option value="2" />5'10" and over
</select>
</td>
</tr>
<tr>
<td>Activity:</td>
<td>
<select name="activity">
<option value="0" />Mostly Sitting
<option value="1" />Mostly Standing
<option value="4" />Mostly Walking
<option value="6" />Mostly Physical Labor </select>
</td>
</tr>
<tr>
<td>Nursing Mom:</td>
<td>
<select name="nursing">
<option value="0" />No
<option value="10" />Yes, Solely
<option value="5" />Yes, Supplementing
</select>
</td>
</tr>
<tr><td colspan="2"><input value="Calculate" onclick="getpoints();" type="button" /></td></tr>
<tr><td>POINT ALLOWANCE:</td><td><input name="dresult" type="text" /></td></tr>
</tr></table>
</form>
</div>
<p align="center">Note: Minimum Daily Points is 18, Max is 44</p></center>
I'm sure people have answered this question multiple times but I have done all the research and tried everything but nothing works. My problem: I'm building a website for my gaming clan and I want a Javascript news ticker/date & time and a Javascript navigation bar. However, when I put these codes in, they don't run with each other on the same page. Possibly an onload issue but like I said, I tried all the solutions. Note: they use jquery. I'll post the html and javascript files as txt files since I can't attach them in their normal form. Index.txt is my HTML Sliding_effect.txt is the Javascript for the menubar Newsticker.txt is the Javascript for the ticker that goes at the bottom of the <body> The actual ticker.js code that runs with newsticker.js was too large to attach. It's 7000 lines long. Any help is appreciated I am trying to add Multiple NoobSlides onto one page. From the sample page listed he http://www.efectorelativo.net/laboratory/noobSlide/ I am trying to add two Sample 5 slideshows side by side on the same page, but when I try it, the second slideshow events don't trigger. The slide show image change works on the first one, but not the second one. Here is the code I am using: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>noobSlide - mootools</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.efectorelativo.net/laboratory/js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="http://www.efectorelativo.net/laboratory/noobSlide/_class.noobSlide.packed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 5 (mode: vertical, using "onWalk" )
var info5 = $('info5').set('opacity',0.5);
var sampleObjectItems =[
{title:'Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5 = new noobSlide({
mode: 'vertical',
box: $('box5'),
size: 180,
items: sampleObjectItems,
addButtons: {
previous: $('prev5'),
play: $('play5'),
stop: $('stop5'),
next: $('next5')
},
onWalk: function(currentItem){
info5.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
}
});
//SAMPLE 5a (mode: vertical, using "onWalk" )
var info5a = $('info5a').set('opacity',0.5);
var sampleObjectItems2 =[
{title:'2222Morbi elementum111', autor:'', date:'', link:'http://www.link11111.com'},
{title:'2222Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
{title:'22222Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
{title:'2222Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
{title:'2222Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
{title:'2222Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
{title:'2222Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
{title:'22222Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
];
var nS5a = new noobSlide({
mode: 'vertical',
box: $('box5a'),
size: 180,
items: sampleObjectItems2,
addButtons: {
previous: $('prev5a'),
play: $('play5a'),
stop: $('stop5a'),
next: $('next5a')
},
onWalk: function(currentItem){
info5a.empty();
new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5a);
}
});
});
</script>
</head><div id="cont">
<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">
<table style="width: 100%" cellspacing="0" cellpadding="0" align="center">
<tr align="left">
<td>
Ayer
</td>
<td>Actual
</td>
</tr>
<td>
<!-- SAMPLE 5 -->
<div class="mask2" style="left: 0px; top: 0px; ">
<div id="box5" style="left: 0px; top: 1px">
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
<div id="info5" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
</div>
<p class="buttons">
<span id="prev5"><< Previous</span>
<span id="play5">Play ></span>
<span id="stop5">Stop</span>
<span id="next5">Next >></span>
</p>
</td>
<!-- SAMPLE 5a -->
<td align="left">
<div class="mask2" style="left: 0px; top: 0px; ">
<div id="box5a" style="left: 0px; top: 1px">
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span>
<span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span>
</div>
<div id="info5a" class="info" style="left: 0px; bottom: 0; height: 21px"></div>
</div>
<p class="buttons">
<span id="prev5a"><< Previous</span>
<span id="play5a">Play ></span>
<span id="stop5a">Stop</span>
<span id="next5a">Next >></span>
</p>
</td>
</table>
</div>
</div>
</body>
</html>
I am new to web design and purchased "Instant PopOver" thinking it would do all the javascripting for me, BUT it doesn't combine the popovers in a single document and their customer service doesn't provide custom coding help. I must not be scripting this right. Here's what I'm working on: http://www.hallornothingdesigns.com/...ew/map_pop.htm The popovers are suppose to all be unique in different locations. Can someone help me? My butchered code is below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- IPO CODE: ALBOX START -->
<script language="javascript">
function showAlert1() {makeAlert('Discover','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert2() {makeAlert('Hang','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert3() {makeAlert('Encounter','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert4() {makeAlert('Challenge','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert5() {makeAlert('Explore','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert6() {makeAlert('Behold','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert7() {makeAlert('Send','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert8() {makeAlert('Take','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert9() {makeAlert('Conquer','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert10() {makeAlert('Seize','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
</script>
<!-- IPO CODE: ALBOX END -->
<title>Grande Villas Spinnakers Kids' Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Fireworks CS3 Dreamweaver CS3 target. Created Sun Dec 20 18:18:27 GMT-0500 (EST) 2009-->
</head>
<body bgcolor="#74b1bf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="javascript" src="AlertPopOVER.js"></script>
<img name="map_background2" src="map_background2.gif" width="1500" height="864" border="0" id="map_background2" usemap="#m_map_background2" alt="" /><map name="m_map_background2" id="m_map_background2">
<area shape="rect" coords="844,449,1028,535" href="http://www.gvcondos.com" target="_blank" title="Grande Villas Homepage" alt="Grande Villas Homepage" />
<area shape="rect" coords="525,195,597,216" href='javascript:void(0);' onClick="javascript:showAlert1();">
<area shape="rect" coords="944,201,989,223" href='javascript:void(0);' onClick="javascript:showAlert2();">
<area shape="rect" coords="716,239,798,257" href='javascript:void(0);' onClick="javascript:showAlert3();">
<area shape="rect" coords="509,332,591,351" href='javascript:void(0);' onClick="javascript:showAlert4();">
<area shape="rect" coords="723,365,792,384" href='javascript:void(0);' onClick="javascript:showAlert5();">
<area shape="rect" coords="856,324,919,343" href='javascript:void(0);' onClick="javascript:showAlert6();">
<area shape="rect" coords="958,373,1000,394" href='javascript:void(0);' onClick="javascript:showAlert7();">
<area shape="rect" coords="824,427,868,446" href='javascript:void(0);' onClick="javascript:showAlert8();">
<area shape="rect" coords="648,518,695,535" href='javascript:void(0);' onClick="javascript:showAlert9();">
<area shape="rect" coords="497,449,562,468" href='javascript:void(0);' onClick="javascript:showAlert10();">
</map>
<!-- IPO CODE: ALBOX START -->
<div id="stl_alert1" style="position: absolute; visibility: hidden;
left: 527px;
top: 215px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert2" style="position: absolute; visibility: hidden;
left: 945px;
top: 221px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert3" style="position: absolute; visibility: hidden;
left: 717px;
top: 258px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert4" style="position: absolute; visibility: hidden;
left: 511px;
top: 350px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert5" style="position: absolute; visibility: hidden;
left: 727px;
top: 295px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert6" style="position: absolute; visibility: hidden;
left: 859px;
top: 344px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert7" style="position: absolute; visibility: hidden;
left: 957px;
top: 393px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert8" style="position: absolute; visibility: hidden;
left: 825px;
top: 447px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert9" style="position: absolute; visibility: hidden;
left: 497px;
top: 470px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert10" style="position: absolute; visibility: hidden;
left: 648px;
top: 538px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<!-- IPO CODE: ALBOX END -->
</body>
</html>
I'd also like these popovers to activate on rollover and close upon mouseout, but I'm trying not to be picky. I'd be happy if I could just get the right content to popup. Thanks for your help!!!! Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript 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" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>
<title>idigify</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
<div class="aboutme_text">
<h2>Just for Fun</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Ads/Advertising</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller2">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Logos</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Billboards</h2>
<div class="workslider_billboard">
</div><!--end of workslider-->
<h2>Business Cards</h2>
<div class="workslider_businesscard">
</div><!--end of workslider-->
<h2>Resumes</h2>
<div class="workslider_resume">
</div><!--end of workslider-->
<h2>Sales Pieces</h2>
<div class="workslider_salespiece">
</div><!--end of workslider-->
</div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(
function() {
//initialize scroller
$(".container").wtScroller({
num_display:3,
slide_width:240,
slide_height:180,
slide_margin:1,
button_width:25,
ctrl_height:15,
margin:1,
auto_scroll:false,
delay:4000,
scroll_speed:1000,
easing:"",
auto_scale:true,
move_one:false,
ctrl_type:"scrollbar",
display_buttons:true,
display_caption:true,
mouseover_caption:false,
caption_align:"bottom",
caption_position:"inside",
cont_nav:true,
shuffle:false
});
//initialize lightbox for scroller
$("a[rel='scroller']").wtLightBox({
rotate:true,
delay:4000,
transition_speed:600,
display_number:true,
display_dbuttons:true,
display_timer:true,
display_caption:true,
caption_align:"bottom",
cont_nav:true,
auto_fit:true,
easing:""
});
}
);
</script>
</body>
</html>
the css Code: .wt-scroller{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller .outside{
background-color:#222;
}
.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}
/*start of scroller2 */
.wt-scroller2{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller2 .outside{
background-color:#222;
}
.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}
/*end of scroller2 */
I've done extensive searching, but each example or explanation i come across is too different from my own, so it's ultimately no use. The problem is that I barely know anything when it comes to Javascript, but yet I'm trying to use it. I have a form on a page. This form contains 6 <select> elements, each with its own <option>Other</option> element. If something isn't listed, the user can choose "Other" and then type into a textbox which appears. I have the following code, which works great if only applied to one <select> element. Code: <select name="How did you hear about us?" id="How did you hear about us?" onchange="makeBox1()">
<option value="0" selected="selected">-- Select --</option>
<option value="1">Search Engine</option>
<option value="2">Referral</option>
<option value="3">Trade Publication</option>
<option value="4">Vendor Web Site</option>
<option value="5">Your Company Website</option>
<option value="6">Direct Mail</option>
<option value="7">Other</option>
</select>
<div id = "inputBox1"></div>
<script type = "text/javascript">
function makeBox1() {
var a = "<input type = 'text' name = 'box1' id = 'box1' class='form popup'>"
if (document.getElementById("How did you hear about us?").value==7) {
document.getElementById("inputBox1").innerHTML = a;
}
else {
document.getElementById("inputBox1").innerHTML = "";
}
}
</script>
I've read that you have to combine onchange events, but i have no idea how to do this (i've done plenty of trial and error, trying to make every item unique, but to no avail. How would i add more scripts like the above? I use this tooltip script on my site: http://craigsworks.com/projects/simpletip/ The problem is that I have several links in the same div class and I want to load different content in tooltip when the mouse is over different links. This is the code I use to load tooltip: Code: $(document).ready(function(){
// Create your tooltips
var api = $(".ttip a").simpletip().simpletip();
api.load('include.php');
});
This is the HTML code: Code: <div class="ttip"> <a userid="1" href="#" >user1</a><br /> <a userid="2" href="#">user2</a> </div> Now the tooltip works only for the first link. For the second one only some default text is shown instead when I hover it! Can anyone please help? Ok so I have this script and I cant figure out how to add multiple star ratings to one page. PHP Code: <? require "config.php" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="SMARTREVIEWSCRIPT.COM" /> <title>Add Your Review</title> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> <!-- var set=false; var v=0; var a; function loadStars() { star1 = new Image(12,12); star1.src = "images/staroff.gif"; star2 = new Image(12,12); star2.src= "images/staron.gif"; } function highlight(x) { if (set==false) { y=x*1+1 switch(x) { case "1": document.getElementById(x).src= star2.src; break; case "2":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "3":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "4":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; case "5":for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } break; } } } function losehighlight(x) { if (set==false) { for (i=1;i<6;i++) { document.getElementById(i).src=star1.src; document.getElementById('vote').innerHTML="" } } } function setStar(x) { y=x*1+1 if (set==false) { switch(x) { case "1": a="1" flash(a); document.review.rating.value = '1'; break; case "2": a="2" flash(a); document.review.rating.value = '2'; break; case "3": a="3" flash(a); document.review.rating.value = '3'; break; case "4": a="4" flash(a); document.review.rating.value = '4'; break; case "5": a="5" flash(a); document.review.rating.value = '5'; break; } set=true; } } function flash() { y=a*1+1 switch(v) { case 0: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=1 setTimeout(flash,200) break; case 1: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=2 setTimeout(flash,200) break; case 2: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=3 setTimeout(flash,200) break; case 3: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=4 setTimeout(flash,200) break; case 4: for (i=1;i<y;i++) { document.getElementById(i).src= star1.src; } v=5 setTimeout(flash,200) break; case 5: for (i=1;i<y;i++) { document.getElementById(i).src= star2.src; } v=6 setTimeout(flash,200) break; } } --> </script> </head> <body> <div id="main"> <? // Stores the product sku as a session $_SESSION['sku'] = $_GET['sku']; echo "<form name='review' method='post' action='add.php?sku=".$_SESSION['sku']."'>"; ?> <table width="600" border="0"> <tr> <td><span class="style1">Name: </span></td> <td><input type="text" name="name" maxlength="32" /></td> </tr> <tr> <td><span class="style1">Review Title: </span></td> <td><input size="51" maxlength="60" type="text" name="reviewtitle" value=""/></td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Rating: </span></td> <td> <body onload="loadStars()"> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:12px; height:12px; float:left;" /> <img src="images/staroff.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:12px; height:12px; float:left;" /> <div id="vote" style="font-family:arial; color:red;"></div> <? echo '<input type="hidden" name="rating1">'; ?> </body> </td> </tr> <tr> <td><span class="style1">Comment: </span></td> <td><textarea name="comment" cols="57" rows="6"></textarea></td> </tr> <tr> <td></td> <td> <input type="submit" value="Submit Review" /> </td> </tr> </table> </form> </div> </body> </html> I understand how to modify the rest of the code to insert this into my database but Im not sure how to change this to allow multiple star reviews. I tried to just copy and paste and change some of the values to no avail. I contacted the seller of the script and he recommended I ask here. I appreciate any help. Thank you. Hi i just switched over from 1.5 to 2.2 swfobject. in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange. but anyway i was reading this.. http://groups.google.com/group/swfob...1e29c96933dfa0 and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop. i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it. but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos... javascript is really not my cup of tea lol... here is my code.. in the head i have this ... Code: <!-- added for swfobject 2.2 -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("player", "9.0.0");
</script
and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one. Code:
begin the loop then do this
<div style="float:left;">
<table border="0" align="left"><tr>
<td align="center"><td align="center"><?=$sql_array->vid_name?><br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
<param name="movie" value="player.swf" />
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
<param name="play" value="false" />
<param name="quality" value="high" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</td></tr></table>
</div>
loop again till done...
so what do i do to show multiples on a page. Hello All, I seem to be stuck on a page for my site: The idea was to have a page with a google map and a java-powered custom twitter feed on the page. However, when I got the map embedded, it seems to interfere with the spry navigation menu, and the twitter feed is not working either. I've tried combining commands and tying each script to an event, but I just don't understand enough to get them all to work. I'm a comic artist by trade, so I'm a little new to coding. Any help would be greatly appreciated! you can find the page here./ Thanks in advance for any help! |
|||||||