|
JavaScript - Changing Images When Links Are Clicked.
Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.
Here is the code relevant to my issue: HTML: Code: <div id="faqBox"> <h1 id="faqHeader"><u>F.A.Q's</u></h1> <ul> <li><a href="#" onclick="">What is the purpose of this website?</a></li> <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li> <li><a href="#">Why was this award created?</a></li> <li><a href="#">How do we nominate somebody?</a></li> <li><a href="#">How are people presented with this award?</a></li> </ul> </div> <div id="faqInfoBox"> <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" /> </div> CSS: Code: #faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}
#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}
JS: Code: var imgArray = new Array(4);
imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';
var currIndex = 0;
function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}
The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look. I don't want to be fed the answer but just some pointers/tips on what I could do. I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created). I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me. Thank you very much in advance if anyone can help. Regards, LC. Similar TutorialsHi, I have an "offline" html demo of 50+page - so it needs to run on standard html/javascripts... I'm trying to do this: Page A Code: <a href="pageb.html?endpage=pageD.html">Page B.html</a> <a href="pageb.html?endpage=pageE.html">Page B.html</a> <a href="pageb.html?endpage=pageF.html">Page B.html</a> Page B Code: <a href="PageC.html?endpage=(the parameter of page A)">Page C</a> <a href="(the parameter of page A)">End Page</a> Page C Code: <a href="(the parameter of page A)">End Page</a> I've searched for a couple of hours already and I just can't seem to find this... I'm not that great at javascripts... Thanks a lot! I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = [];
var radiolist = [];
var labelspans = [];
var labels = [];
var radios = [];
var count;
var spans = document.getElementsByTagName('span');
function getLabels()
{
for (x=0; x<spans.length; x++)
{
if (spans[x].className == "LabelWrapper")
{
labelspans.push(spans[x]);
}
}
for (y=0; y<labelspans.length; y++)
{
labels.push(labelspans[y].firstChild);
radioname.push(labelspans[y].firstChild.htmlFor);
}
}
function getRadios()
{
//will put all radio groups into the "radiolist" array
for (z=0; z<radioname.length; z++)
{
radiolist.push(document.getElementsByName(radioname[z]));
//will add Event Listener to each radio button, and add each one to the "radios" array
for (i=0; i<radiolist[z].length; i++)
{
chkradio = radiolist[z][i];
chkradio.setAttribute("count",Number(z));
chkradio.addEventListener("click", function(){changeLabel()}, false);
radios.push(chkradio);
}
}
}
function changeLabel()
//loops through all the radios to check if they are selected, and changes label color accordingly
{
for (w=0; w<radios.length; w++)
{
if (radios[w].checked)
{
a = radios[w].getAttribute("count");
labels[a].innerHTML = labels[a].innerHTML.fontcolor("green");
}
}
}
getLabels();
getRadios();
This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! hi, on my site: http://helix3d.previewsite.co.uk/marketing.html the images slide onto the next when the numbers are clicked, I would like to have this functionality on the actual image... need a bit of help here?! Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Helix</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css" title="default" /><!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').after('<div id="nav1" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav1',
befo onBefore
});
$('#slideshow2').after('<div id="nav2" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav2',
befo onBefore
});
$('#slideshow3').after('<div id="nav3" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav3',
befo onBefore
});
$('#slideshow4').after('<div id="nav4" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav4',
befo onBefore
});
$('#slideshow5').after('<div id="nav5" class="nav">').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav5',
befo onBefore
});
function onBefore() {
$('#title').html(this.alt);
}
});
</script>
</head>
<body>
<div id="top">
<div id="topwrapper">
<a href="index.html"><div id="logo">
</div></a>
<ul id="rightnav">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="news.html" title="News">News</a></li>
<li><a href="services.html" title="Services">Services</a></li>
<li><a href="archive.html" title="Archives">Archive</a></li>
<li><a href="finishes.html" title="Finishes">Finishes</a></li>
<li><a href="showreel.html" title="Showreel">Showreel</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<nav>
<ul>
<li><a href="events.html" title="HELIX EVENTS">HELIX EVENTS</a></li>
<li><a href="marketing.html" title="HELIX EXPERIENTIAL MARKETING" class="menuselected">HELIX EXPERIENTIAL MARKETING</a></li>
<li><a href="film.html" title="HELIX FILM & TV SET CONSTRUCTION">HELIX FILM & TV SET CONSTRUCTION</a></li>
<li><a href="exhibitions.html" title="HELIX EXHIBITIONS">HELIX EXHIBITIONS</a></li>
<li><a href="interiors.html" title="HELIX COMMERCIAL INTERIORS">HELIX COMMERCIAL INTERIORS</a></li>
</ul>
</nav>
<div class="line"> </div>
</div>
</div>
<div id="content">
<section id="slider">
<div id="viewport">
<div id="container">
<div id="section-1" class="section">
<img src="images/hero_experiential.jpg">
</div>
</div>
</div>
</section>
<div class="line"> </div>
<div id="left">
<h1>HELIX MARKETING</h1>
<p>We help brands and agencies create experiences that excite, surprise and delight. Our attention to detail and fast-paced production bring your experiential marketing to life and ensure memorable, positive brand connections.</p>
</div>
<div id="right">
<img src="images/quote-marketing.gif" alt="Marketing quote" />
<ul>
<li class="youtube"><a href="#"><img src="images/yt.png" alt="youtube" /></a></li>
<li class="twitter"><a href="#"><img src="images/twit.png" alt="Twitter" /></a></li>
<li class="facebook"><a href="#"><img src="images/fb.png" alt="Facebook" /></a></li>
</ul>
</div>
<div class="clear"> </div>
<div class="dashedlinetop"> </div>
<div id="box1">
<h1>01</h1>
<h2>V Hand</h2>
<p>We were contracted by Speed Communications PR to turn ideas from the creative team at The Game Changer into reality. The concept was a giant hand over 30 ft tall making the V for Virgin sign, designed to look as if it had burst up through the ground.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client: Virgin Business Media.<br>
Agency : Speed Communications.<br>
Creative : The Game Changer<br>
Location : Canary Wharf</li>
</ul>
<div id="casestudy1"><a href="case-study-virgin.html">CASE STUDY</a></div>
<div id="slideshow1" class="pics">
<img src="images/marketing/virgin1.jpg" alt="1"/>
<img src="images/marketing/virgin2.jpg" alt="2"/>
<img src="images/marketing/virgin3.jpg" alt="3"/>
<img src="images/marketing/virgin4.jpg" alt="4"/>
<img src="images/marketing/virgin5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box2">
<h1>02</h1>
<h2>Cat Walk</h2>
<p>We were commissioned by Mischief PR to design, manufacture and project manage the installation of the world's first car mounted fashion catwalk. We scoured London for priceless shoot locations normally off limits and organised logistics to enable a super fast, film shoot set up.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Vauxhall.<br>
Agency : Mischief PR.<br>
Creative : Dan Glover.<br>
Location : St Paul's Cathedral</li>
</ul>
<div id="slideshow2" class="pics">
<img src="images/marketing/carwalk1.jpg" alt="1"/>
<img src="images/marketing/carwalk2.jpg" alt="2"/>
<img src="images/marketing/carwalk3.jpg" alt="3"/>
<img src="images/marketing/carwalk4.jpg" alt="4"/>
<img src="images/marketing/carwalk5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box3">
<h1>03</h1>
<h2>Tower of Terror</h2>
<p>As the centre piece of the European launch of the Disney's new Tower Of Terror ride in Paris, Cow PR commissioned us to design and build a full seized replica model of a lift car from the ride. The twist was that the lift had to look as if it had crash landed!</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : Disney<br>
Agency : Cow PR<br>
Creative : Claire Myddleton<br>
Location : Leicester Square</li>
</ul>
<div id="slideshow3" class="pics">
<img src="images/marketing/tot1.jpg" alt="1"/>
<img src="images/marketing/tot2.jpg" alt="2"/>
<img src="images/marketing/tot3.jpg" alt="3"/>
<img src="images/marketing/tot4.jpg" alt="4"/>
<img src="images/marketing/tot5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box4">
<h1>04</h1>
<h2>Ice Age 3</h2>
<p>The set for this experiential brief; for 20th Century Century Fox's Ice 3 movie launch, was designed in house by Brian Dowling. The experience included an chilled Ice Cave and a jungle equipped with rock faces, real plants, a bridge, a lake and heated humidified air. </p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client.: 20th Century Fox.<br>
Agency : Designwerk<br>
Creative : Scott and Ed<br>
Location : CWOA</li>
</ul>
<div id="slideshow4" class="pics">
<img src="images/marketing/ice1.jpg" alt="1"/>
<img src="images/marketing/ice2.jpg" alt="2"/>
<img src="images/marketing/ice3.jpg" alt="3"/>
<img src="images/marketing/ice4.jpg" alt="4"/>
<img src="images/marketing/ice5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<div class="dashedlinetop"> </div>
<div id="box5">
<h1>05</h1>
<h2>Hanging gardens of paddington</h2>
<p>When Mischief PR wanted to create "The Hanging Gardens of Paddington" for the launch of boutique Hotel Indigo there was only one company on the call sheet. We devised a plan to cantilever the giant basket 40ft above the street, the story went global, the launch was a huge success.</p>
<ul>
<li><strong>Key people:</strong></li>
<li>Client : International Hotel Group<br>
Agency : Mischief PR<br>
Creative : Dan Glover<br>
Location : Paddington</li>
</ul>
<div id="slideshow5" class="pics">
<img src="images/marketing/basket1.jpg" alt="1"/>
<img src="images/marketing/basket2.jpg" alt="2"/>
<img src="images/marketing/basket3.jpg" alt="3"/>
<img src="images/marketing/basket4.jpg" alt="4"/>
<img src="images/marketing/basket5.jpg" alt="5"/> </div>
</div>
<div class="dashedlinebottom"> </div>
<footer>
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="events.html" title="Events Design">Events Design</a></li>
<li><a href="marketing.html" title="Marketing Design">Marketing Design</a></li>
<li><a href="film.html" title="Film & Set Design">Film & Set Design</a></li>
<li><a href="exhibitions.html" title="Exhibition Design">Exhibition Design</a></li>
<li><a href="interiors.html" title="Commercial Interior Design">Commercial Interior Design</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="contact.html" title="Contact Helix Ltd">Contact Helix Ltd</a></li>
<li><a href="news.html" title="Latest Helix News">Latest Helix News</a></li>
<li><a href="careers.html" title="Careers">Careers</a></li>
</ul>
<!--<div class="copyright">©2011 Helix </div> -->
</footer>
</div> <!-- end content -->
</body>
</html>
I have a javascript function that changes the src and href of an image within a repeating function. If i call document.getelementbyid("image").src, i can change the image and by calling document.getelementbyid("image").Href, i am able to change the link. The problem i have now is that when the cursor goes over the image it gets the link location as a snapshot. If i leave my cursor and the image and link location changes, it does not update the snapshot and if i click on the new image it uses the previous link rather than the new one. The only way to get the new link is to move off the image and back on to get a new snapshot of the new link. Is there a way i can tell the javascript to change the image, link location and update the browser to the new link without moving the cursor.
Hi all, I hoping somebody can help me. I'm trying to acheive a line of text (with multiple links on each line) that change at set intervals. The code below seems to be working but I can only get working links on the first line that appears. Please can somebody help a gal out? xo [CODE] <html> <head> <title>Rotating Text</title> <script type="text/javascript"> var rotatingTextElement; var rotatingText = new Array(); var ctr = 0; function initRotateText() { rotatingTextElement = document.getElementById("textToChange"); rotatingText[0] = rotatingTextElement.innerHTML; rotatingText[1] = "why won't you work!?!?!?"; rotatingText[2] = "purdy please"; setInterval(rotateText, 5000); } function rotateText() { ctr++; if(ctr >= rotatingText.length) { ctr = 0; } rotatingTextElement.innerHTML = rotatingText[ctr]; } window.onload = initRotateText; </script> </head> <body> <span id="textToChange">log into your <a href="http://www.hotmail.com/">please</a> policy.</a> | can you <a href="http://www.google.com"> me?</a> </span> </body> </html> anyone know a script or way to change images based on radio button on another page or way to send value or src of an image to another page and way to have it show up.
I am probably use way too much code to have this done.. but this is what I came up with.. Code: $(function() {
$("#mail")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Signup for Alpha Web Pro, you get your own email account with us. [username]@alphawebpro.com").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
$("#user")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Check out the Alpha Web Pro community. There you can interact with your programming friends and post things to the forum").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#analytics")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("COMING SOON! - Website analytics for any and all of your websites you wish to monitor").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
$("#shop")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.png";
$(this).attr("src", src);
$(this).css("bottom", 10);
$(".msg").text("Go shopping at Alpha Web Pro.com; we have what you are looking for. Website templates, scripts, and ebooks for noobs all the way to master coder").show("slow");
})
.mouseout(function() {
var src = $(this).attr("src").replace("_over", "");
$(this).attr("src", src);
$(this).css("bottom", "5");
$(".msg").text("").hide("slow");
});
});
Problem is it doesn't do anything. When I only have one image set to change on mouseover it works fine.. I put two or more in there it doesn't work on any of the images. Any idea whats going on? Thanks in advanced! I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering. I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is: <script type="text/javascript"> if (document.images) {image0 = new Image; image0.src = "i/p0.png"; image1 = new Image; image1.src = "i/p1.png"; image2 = new Image; image2.src = "i/p2.png"; image3 = new Image; image3.src = "i/p3.png"; image4 = new Image; image4.src = "i/p4.png"; image5 = new Image; image5.src = "i/p5.png"; image6 = new Image; image6.src = "i/p6.png"; }</script> and <img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/> <span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span> <br clear="all"/> <span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span> <span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/> <span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/> Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful. I'm using code based on these functions to fade images up from black as part of a slideshow: Code: function fade_down(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 100; i >= 0; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function fade_up(id, millisec) {
// fade image from 0% to 100% visible
var speed = Math.round(millisec / 100);
var timer = 0;
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
function changeOpac(opacity, id) {
//change the opacity for different browsers
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
It works OK but there is often noticeable flicker, even when the images are preloaded. See here http://www.pwtphoto.com/flowers/slid.../D300_1873.jpg and click "Start Slidehow". This happens in all browsers - it's not the well documented Firefox glitch. The images are pretty large - typically 1000 x 670 pixels - which may be part of the problem. Is there a way to fade images up or down more smoothly? Is there any alternative to using opacity? Thanks. Hey all, First off, just wanted to send a big thanks out to everyone on this board that has helped me along my path, you all have been a really big help! Ok, now on to today's question. I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map. Here is the basic code: Code: <head>
<?php
//assign array of links to string
$row_limit = $num_rows - 1;
for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
{
if ($otmm_loop == 0)
{
$otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
}
elseif ($otmm_loop == $row_limit)
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
}
else
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
}
}
$s1 = "$otmm_image_string";
$qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
}
</script>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(<?echo("$qs1");?>);
</script>
</head>
<body>
<a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a>
<img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
BORDER="2"
usemap="#mymap">
<MAP NAME="mymap">
<area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo("$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" rel="nofollow" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
<area shape="rect" coords="<?echo("$autism_x_start");?>,<?echo("$autism_y_start");?>,<?echo("$autism_x_end");?>,<?echo("$autism_y_end");?>" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" rel="nofollow" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
<area shape="rect" coords="<?echo("$britania_x_start");?>,<?echo("$britania_y_start");?>,<?echo("$britania_x_end");?>,<?echo("$britania_y_end");?>" onMouseover="doChanges(2)" href="http://www.britaniaminingmuseum.ca/" rel="nofollow" target="_blank" Title="Britannia Mining Museum" alt="Britannia Mining Museum">
<area shape="rect" coords="<?echo("$sable_x_start");?>,<?echo("$sable_y_start");?>,<?echo("$sable_x_end");?>,<?echo("$sable_y_end");?>" onMouseover="doChanges(3)" href="http://sableresources.com/" rel="nofollow" target="_blank" Title="Sable Resources - Shasta" alt="Sable Resources - Shasta">
<area shape="rect" coords="<?echo("$northgate_x_start");?>,<?echo("$northgate_y_start");?>,<?echo("$northgate_x_end");?>,<?echo("$northgate_y_end");?>" onMouseover="doChanges(4)" href="http://northgateexploration.com/Home/default.aspx" rel="nofollow" target="_blank" Title="Northgate Resources - Kemess South" alt="Northgate Resources - Kemess South">
<area shape="rect" coords="<?echo("$thompson_x_start");?>,<?echo("$thompson_y_start");?>,<?echo("$thompson_x_end");?>,<?echo("$thompson_y_end");?>" onMouseover="doChanges(5)" href="http://www.thompsoncreekmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Thompson Creek Metals - Endako" alt="Thompson Creek Metals - Endako">
<area shape="rect" coords="<?echo("$imperial_x_start");?>,<?echo("$imperial_y_start");?>,<?echo("$imperial_x_end");?>,<?echo("$imperial_y_end");?>" onMouseover="doChanges(6)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Huckleberry" alt="Imperial Metals - Huckleberry">
<area shape="rect" coords="<?echo("$westerncoal_x_start");?>,<?echo("$westerncoal_y_start");?>,<?echo("$westerncoal_x_end");?>,<?echo("$westerncoal_y_end");?>" onMouseover="doChanges(7)" href="http://www.westerncoal.com/" rel="nofollow" target="_blank" Title="Western Coal - Brule, Dillon, Perry Creek" alt="Western Coal - Brule, Dillon, Perry Creek">
<area shape="rect" coords="<?echo("$peaceriver_x_start");?>,<?echo("$peaceriver_y_start");?>,<?echo("$peaceriver_x_end");?>,<?echo("$peaceriver_y_end");?>" onMouseover="doChanges(8)" href="http://www.peacerivercoal.com/" rel="nofollow" target="_blank" Title="Peace River Coal" alt="Peace River Coal">
<area shape="rect" coords="<?echo("$teckcoal1_x_start");?>,<?echo("$teckcoal1_y_start");?>,<?echo("$teckcoal1_x_end");?>,<?echo("$teckcoal1_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Fording River" alt="Teck Coal Fording River">
<area shape="rect" coords="<?echo("$teckcoal2_x_start");?>,<?echo("$teckcoal2_y_start");?>,<?echo("$teckcoal2_x_end");?>,<?echo("$teckcoal2_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Greenhills" alt="Teck Coal Greenhills">
<area shape="rect" coords="<?echo("$teckcoal3_x_start");?>,<?echo("$teckcoal3_y_start");?>,<?echo("$teckcoal3_x_end");?>,<?echo("$teckcoal3_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Line Creek" alt="Teck Coal Line Creek">
<area shape="rect" coords="<?echo("$teckcoal4_x_start");?>,<?echo("$teckcoal4_y_start");?>,<?echo("$teckcoal4_x_end");?>,<?echo("$teckcoal4_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Elkview" alt="Teck Coal Elkview">
<area shape="rect" coords="<?echo("$teckcoal5_x_start");?>,<?echo("$teckcoal5_y_start");?>,<?echo("$teckcoal5_x_end");?>,<?echo("$teckcoal5_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Coal Mountain" alt="Teck Coal Coal Mountian">
<area shape="rect" coords="<?echo("$imperial2_x_start");?>,<?echo("$imperial2_y_start");?>,<?echo("$imperial2_x_end");?>,<?echo("$imperial2_y_end");?>" onMouseover="doChanges(10)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Mount Polley" alt="Imperial Metals - Mount Polley">
<area shape="rect" coords="<?echo("$teck_x_start");?>,<?echo("$teck_y_start");?>,<?echo("$teck_x_end");?>,<?echo("$teck_y_end");?>" onMouseover="doChanges(11)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck - Huckleberry" alt="Teck - Huckleberry">
<area shape="rect" coords="<?echo("$taseko_x_start");?>,<?echo("$taseko_y_start");?>,<?echo("$taseko_x_end");?>,<?echo("$taseko_y_end");?>" onMouseover="doChanges(12)" href="http://www.tasekomines.com/tko/Home.asp" rel="nofollow" target="_blank" Title="Taseko - Gibralar" alt="Taseko - Gibralar">
<area shape="rect" coords="<?echo("$roca_x_start");?>,<?echo("$roca_y_start");?>,<?echo("$roca_x_end");?>,<?echo("$roca_y_end");?>" onMouseover="doChanges(13)" href="http://www.rocamines.com/s/Home.asp" rel="nofollow" target="_blank" Title="Roca - Max" alt="Roca - Max">
<area shape="rect" coords="<?echo("$breakwater_x_start");?>,<?echo("$breakwater_y_start");?>,<?echo("$breakwater_x_end");?>,<?echo("$breakwater_y_end");?>" onMouseover="doChanges(14)" href="http://www.breakwater.ca/" rel="nofollow" target="_blank" Title="Breakwater - Myra Falls" alt="Breakwater - Myra Falls">
<area shape="rect" coords="<?echo("$hillsborough_x_start");?>,<?echo("$hillsborough_y_start");?>,<?echo("$hillsborough_x_end");?>,<?echo("$hillsborough_y_end");?>" onMouseover="doChanges(15)" href="http://www.hillsboroughresources.com/" rel="nofollow" target="_blank" Title="Hillsborough - Quinsam" alt="Hillsborough - Quinsam">
</MAP>
</body>
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up. Any thoughts/suggestions would be greatly appreciated, Brian I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code: Code: var current_overID = "";
var last_overID = "";
function item (img_name,width,height)
{
img_prefix = img_name;
this.slide_img = new Image (width,height);
this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
function new_item (img_name,width,height)
{
item [img_name] = new item (img_name,width,height);
}
function mouseover (itemID, mapID)
{
current_overID = itemID;
if (current_overID != last_overID) {
document.deltavmap.src = item [current_overID].slide_img.src;
document.deltavmap.useMap=mapID;
}
}
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more
<MAP NAME="deltav">
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')" window.defaultStatus='' window.status='Engineering' return true >
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true >
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true >
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
<MAP NAME="eng">
<AREA SHAPE="RECT" COORDS="38,52,244,75"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
window.defaultStatus=''
window.status='Batch Processing' return true
>
<AREA SHAPE="RECT" COORDS="40,82,230,103"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
window.defaultStatus=''
window.status='Control Modules' return true
>
<AREA SHAPE="RECT" COORDS="40,112,143,136"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
window.defaultStatus=''
window.status='Graphics' return true
>
<AREA SHAPE="RECT" COORDS="40,141,176,168"
HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
window.defaultStatus=''
window.status='ProtoTyping' return true
>
<AREA SHAPE="RECT" COORDS="24,224,84,234"
HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
window.defaultStatus=''
window.status='Software' return true
>
<AREA SHAPE="RECT" COORDS="24,236,124,247"
HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
window.defaultStatus=''
window.status='Documentation' return true
>
<AREA SHAPE="RECT" COORDS="25,248,76,261"
HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
window.defaultStatus=''
window.status='Support' return true
>
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true >
<AREA SHAPE="DEFAULT" NOHREF>
</MAP>
... many others
Can any one tell me what i need to do to fix this in IE? Thanks! Fayette <script language="JavaScript"> function changeColor(cell_id){var state1="#dde6ed"; var state2="#ffc20e"; var cellid = new Array ("id1", "id2", "id3", "id4", "id5", "id6"); for(var i = 0; i < cellid.length; i++){var nav = document.getElementById(cellid[i]); if(cellid == nav.id){nav.style.backgroundColor=state2;} else {nav.style.backgroundColor=state1;}}} </script> Can anyone tell me what is wrong with this script. I put an onClick= changeColor(this);" in my <td> tag to call the script but still not working. I'm a php developer and have come across a mind boggling issue involving Javascript. I'm uploading images to a server without issue. They are being returned to the page in thumbnails. The script works great but I can't get the links for the images that I've uploaded. If I right click and view the image I can see the link on the server. How would I go about getting that link? If I look at the source code the link isn't present. Its a dynamically generated link for the uploaded image. Being completely unfamiliar with Javascript I'm hoping someone here can help me out. Here's the code I'm working with: Code: <input type="file" name="u" size="40" style="width:500px"/><br/>
</div>
<style type="text/css">
.flashUpload {width : 151px;}
</style>
<script>
document.write('<script type="text/javascript" language="JavaScript" src="mytoken"' + '><' + '/script>');
function processUrlResponse(pic,error,window) {
if ( window.parent != 'undefined' )
$(window).remove();
}
var errorTexts = {
'ERROR' :'There was an error uploading your picture.',
'FS' : 'The file size of the picture you attempted to add is too large. Please reduce your picture\'s file size before adding it again.',
'FP' : 'You specified a picture file that could not be found on your computer.',
'ME' : 'There was an error uploading your picture. ',
'FC' : 'The content of your picture file is corrupted.',
'FF' : 'There was a problem with the format of your picture file.',
'SD' : 'There was a problem connecting to Picture Services.'
};
var popupMsg =
'<CENTER class="modal">' +
'<TABLE height=210 cellSpacing=0 cellPadding=0 width=240 border=1>' +
'<TR vAlign=top align=left><TD>' +
'<TABLE cellSpacing=0 cellPadding=6 width="100%" border=0>' +
'<TR><TD align=right><div class="closeBtn close"> </div></TD></TR>' +
'<TR align=middle>' +
'<TD><B><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=4><I>' +
'Loading Pictures' +
'</I></FONT><P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#003399 size=2>' +
'Please wait.' +
'</B></FONT><BR><BR><img src="myupload.com/busy.gif"/></p></TD></TR></TABLE></TD></TR></TABLE></CENTER>';
var imageUpload = {
disableFlashResize :true,
uploadUrl : 'myupload.com',
dataField : 'Photo',
thumbnailSizeId : '14',
defaultSizeId : '18',
removeText : 'Remove',
cancelText : 'Cancel',
retryText : 'Retry upload',
uploadingText : 'Image uploading',
flash_button_width : 151,
flash_button_height : 18,
flash_button_text : '<span class="button">Select Images</span>',
flash_button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt;font-weight:bold;} .buttonSmall { font-size: 10pt; }',
flash_button_text_top_padding : 1,
flash_button_text_left_padding : 11,
errorTexts : errorTexts,
popupMsg : popupMsg
};
My head is spinning. Hey Im trying to add links in the images for EasySlide but I cant see to see where to put it..... Here is the .js code: Code: /**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/
* @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.handStopped = false;
this.animating = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.contentDiv = this.scroller.down('div');
this.current = $(this.contentDiv.children[0].id);
this.sectionWidth = this.contentDiv.children[0].getWidth();
this.slideRelations = {};
this.options = Object.extend({
effectType: 'mosaic',
duration: 3.0,
frequency: 3,
eRows: Prototype.Browser.IE ? 3 : 6,
eCols: Prototype.Browser.IE ? 6 : 12,
eColor: '#FFFFFF'
}, options || {});
this.effects = {
'scroll' : this.scroll,
'speedscroll' : this.speedscroll,
'fade' : this.fade,
'blend' : this.blend,
'mosaic' : this.mosaic
};
this.sections = this.wrapper.getElementsBySelector('div.section');
for (var i = 0; i < this.sections.length; i++) {
var nextSibling = this.sections[i].nextSiblings()[0];
if (nextSibling){
this.slideRelations[this.sections[i].id] = nextSibling.id;
} else {
this.slideRelations[this.sections[i].id] = this.sections[0].id;
}
this.effects[this.options.effectType].bind(this)().prepare(this.sections[i], i);
}
this.events = {
mouseover: this.pause.bind(this),
mouseout: this.resume.bind(this)
};
this.addObservers();
if (this.options.autoGlide) {
this.start();
} else {
this.handStopped = true;
}
},
scroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
new Effect.Parallel([
new Effect.Move(elementIdToShow, {
sync: true,
x: 0,
y: 0,
mode: 'absolute'
}),
new Effect.Move(glider.current.id, {
sync: true,
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute'
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
speedscroll: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
$(el).setStyle('left: ' + glider.sectionWidth + 'px;');
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle('left: ' + (direction === 'normal' ? glider.sectionWidth : -glider.sectionWidth) + 'px;');
$(elementIdToShow).setStyle({zIndex: 5});
$(glider.current.id).setStyle({zIndex: 1});
var currentId = glider.current.id;
new Effect.Move(elementIdToShow, {
x: 0,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration / 2,
afterFinish: function() {
moveCurrent.cancel();
$(currentId).setStyle('left: ' + (direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth) + 'px;');
glider.setAnimating(false);
}
});
var moveCurrent = new Effect.Move(glider.current.id, {
x: direction === 'normal' ? -glider.sectionWidth : glider.sectionWidth,
y: 0,
mode: 'absolute',
transition: Effect.Transitions.linear,
duration: glider.options.duration
});
}
}
},
fade: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Opacity(glider.current.id, {
duration: glider.options.duration,
from: 1.0,
to: 0.0,
afterFinish: function() {
new Effect.Opacity(elementIdToShow, {
duration: glider.options.duration,
from: 0.0,
to: 1.0,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}.bind(glider)
});
}
}
},
blend: function() {
var glider = this;
return {
prepa function(el, i) {
if (i > 0) {
el.setOpacity(0);
$(el).setStyle({ zIndex : '0' });
} else {
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
$(el).setStyle({ zIndex : '998' });
$$('.easyslidecontrolwr')[0].setStyle({ zIndex : '999' });
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : '998' });
$(glider.current.id).setStyle({ zIndex : '0' });
new Effect.Parallel([
new Effect.Opacity(glider.current.id, {
sync: true,
duration: glider.options.duration,
from: 1.0,
to: 0.0
}),
new Effect.Opacity(elementIdToShow, {
sync: true,
duration: glider.options.duration,
from: 0.0,
to: 1.0
})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
}
}
},
mosaic: function() {
var glider = this;
var delayedAppear = function(eSquare) {
var opacity = Math.random();
new Effect.Parallel([
new Effect.Appear ( eSquare, {from: 0, to: opacity, duration: this.options.duration} ),
new Effect.Appear ( eSquare, {from: opacity, to: 0, duration: this.options.duration/1.25} )
], {sync: false});
};
return {
prepa function(el, i) {
if (i > 0) {
el.setStyle({ zIndex : 0 });
el.hide();
} else {
el.setStyle({ zIndex : 999 });
glider.toggleControl($$('a[href="#' + el.id + '"]')[0]);
}
if (i == (glider.sections.length - 1)) {
glider.eSquares = [];
var elDimension = el.getDimensions();
var elWidth = elDimension.width;
var elHeight = elDimension.height;
var sqWidth = elWidth / glider.options.eCols;
var sqHeight = elHeight / glider.options.eRows;
$R(0, glider.options.eCols-1).each(function(col) {
glider.eSquares[col] = [];
$R(0, glider.options.eRows-1).each(function(row) {
var sqLeft = col * sqWidth;
var sqTop = row * sqHeight;
glider.eSquares[col][row] = new Element('div').setStyle({
opacity : 0,
backgroundColor : glider.options.eColor,
position : 'absolute',
zIndex : 5,
left : sqLeft + 'px',
top : sqTop + 'px',
width : sqWidth + 'px',
height : sqHeight + 'px'
});
el.up('div').insert(glider.eSquares[col][row]);
}.bind(glider))
}.bind(glider));
}
},
animate: function(elementIdToShow, direction) {
$(elementIdToShow).setStyle({ zIndex : 999 });
$(glider.current.id).setStyle({ zIndex : 0 });
new Effect.Parallel([
new Effect.Fade(glider.current.id, {sync: true}),
new Effect.Appear(elementIdToShow, {sync: true})
], {
duration: glider.options.duration,
afterFinish: function() {
glider.setAnimating(false);
}.bind(glider)
});
$R(0, glider.options.eCols-1).each(function(col) {
$R(0, glider.options.eRows-1).each(function(row) {
var eSquare = glider.eSquares[col][row];
var delay = Math.random() * (glider.options.duration / 3) * 1000;
setTimeout(delayedAppear.bind(glider, eSquare), delay);
}.bind(this))
}.bind(this));
}
}
},
setAnimating: function(flag) {
this.animating = flag;
if (flag) {
$$('.easyslidecontrolwr')[0].addClassName('disabled');
} else {
$$('.easyslidecontrolwr')[0].removeClassName('disabled');
}
},
addObservers: function(){
this.wrapper.observe('mouseover', this.events.mouseover);
this.wrapper.observe('mouseout', this.events.mouseout);
var descriptions = this.wrapper.getElementsBySelector('div.sliderdescription');
descriptions.invoke('observe', 'mouseover', this.makeActive);
descriptions.invoke('observe', 'mouseout', this.makeInactive);
//Nubmbers
var controls = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidedirect');
controls.invoke('observe', 'click', this.numClick.bind(this));
//Arrows
var stop = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidestop');
stop.invoke('observe', 'click', this.stop.bind(this));
var play = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideplay');
play.invoke('observe', 'click', this.start.bind(this));
var prev = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslideprev');
prev.invoke('observe', 'click', this.previous.bind(this));
var next = this.wrapper.getElementsBySelector('div.easyslidercontrol a.easyslidenext');
next.invoke('observe', 'click', this.next.bind(this));
},
numClick: function(event){
var element = Event.findElement(event, 'a'); /*clicked link*/
var nextElementId = element.href.split('#')[1];
var direction = 'normal';
for (var i in this.slideRelations) {
if (i === this.current.id) {
direction = 'normal';
break;
}
if (i === nextElementId) {
direction = 'reverse';
break;
}
}
this.animate(nextElementId, direction);
Event.stop(event);
},
animate: function(elementIdToShow, direction){
if (this.animating || this.current.id == elementIdToShow) {
return;
}
this.setAnimating(true);
this.toggleControl($$('a[href="#' + elementIdToShow + '"]')[0]);
this.effects[this.options.effectType].bind(this)().animate(elementIdToShow, direction);
this.current = $(elementIdToShow);
},
next: function(event){
var nextMove = '';
nextMove = this.slideRelations[this.current.id];
this.animate(nextMove, 'normal');
if (event) {
Event.stop(event);
}
},
previous: function(event){
var prevMove = '';
for (var i in this.slideRelations) {
if (this.slideRelations[i] == this.current.id) {
prevMove = i;
break;
}
}
this.animate(prevMove, 'reverse');
if (event) {
Event.stop(event);
}
},
makeActive: function(event){
var element = Event.findElement(event, 'div');
element.addClassName('active');
},
makeInactive: function(event){
var element = Event.findElement(event, 'div');
element.removeClassName('active');
},
toggleControl: function(el){
if (!el) return false;
$$('.easyslidercontrol a').invoke('removeClassName', 'active');
el.addClassName('active');
},
stop: function(event){
this.handStopped = true;
clearTimeout(this.timer);
Event.stop(event);
},
start: function(event){
this.handStopped = false;
this.periodicallyUpdate();
if (event) {
Event.stop(event);
}
},
pause: function(event){
if (!this.handStopped) {
clearTimeout(this.timer);
this.timer = null;
}
Event.stop(event);
},
resume: function(event){
if (!this.handStopped) {
this.periodicallyUpdate();
}
},
periodicallyUpdate: function(){
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency * 1000);
}
});
Somewhere there each time a image appears I want it to go to a certain link (for example purposes: google.com). How can I do this? I imagine there is a onClick event somewhere in there but I just cannot find it. Thanks! Hello, I need the links to the rotating images to open in a new window. Is there an easy way to do this? Here is my code: [CODE] <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["/pics/nav/home2/music-club_manatella.jpg", "", "/progs/main/manatella.pdf"]; slides[1] = ["/pics/nav/home2/teen-read-week2011.jpg", "", "/teens/teen-read-week2011.pdf"]; slides[2] = ["/pics/nav/home2/oceanway-express.jpg", "", "/lib/branches/OWY.html"]; slides[3] = ["/pics/nav/home2/jea-green.jpg", "", "/progs/jpl/home-energy-evaluation.html"]; slides[4] = ["/pics/nav/home2/childrens-summer-reading.jpg", "", "/kids/kids-summer-reading2011.pdf"]; slides[5] = ["/pics/nav/home2/teen-summer-reading.jpg", "", "/teens/teens-summer-reading2011.pdf"]; slides[6] = ["/pics/nav/home2/internet-safety.jpg", "", "/Training/Internet-Safety/internet-safety.html"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> [CODE] [URL]http://jpl.coj.net Thank you so much for your help, Elbee Hi all I've been looking now for over a week on how create this http://instances.110mb.com/ effect when you hover over the ships on that page. I would be eternally grateful for any ideas how to replicate this effect. Thanks Rob Hi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues: 1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com). 2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded. You can see the overall code he http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216) Example (using .animate): http://www.matthewruddy.com/demo/ I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution. I would appreciate if anyone could help me out. Thanks in advance. Matthew. hey guys this is my first post, looking at the sheer wwealth of knowledge on here i thought you guys would be the best people to ask. I have created a photography website myself and coded it all in dreamweaver cs4. Now i have created it using html, as i didnt want to limit it to flash users and loading times etc etc. So today i found myself a nice simple slideshow tool that uses html and javascript. i created it using a site online (which i will not post as i dont think we are allowed to post to online sites). The slideshow loads images up in the background, and it plays them in a random order. Now i am able to define individual image links to either a url of the an image, or point it to individual images, listing them one by one in my coding, which as a photographer having differet galleries is goign to be a royal pain when i want to have new images showing up. So my idea is to replace the code that retrieves in dividual images from url's, to replace it with a piece of code that will display an image from a list of about 7 or 8 folders on my server all containing images.... i.e. displays an image from the folder .../images/models/pic01.jpg then it brings up an iamge from a different folder .../images/portrait/pic08.jpg. Is there a way to do this and how can i go about it? this is the code i currently have: 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]=["/images/models/photo01.jpg", "", ""];
theimage[1]=["/images/models/photo02.jpg", "", ""];
theimage[2]=["/images/models/photo03.jpg", "", ""];
theimage[3]=["/images/models/photo04.jpg", "", ""];
theimage[4]=["/images/models/photo05.jpg", "", ""];
///// Plugin variables
playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
dotrans=1; // if value = 1 then there are transitions played in IE
transtype='revealtrans';// 'blendTrans' or 'revealtrans'
transattributes='0';// duration=seconds,transition=#<24
//#####
//key that holds where in the array currently are
i=0;
//###########################################
//if random
function SetRandom() {
tempimage = new Array();
for(p=0; p<theimage.length; p++){
for(p1=0; p1>-1; p1) {
tempNum = Math.floor(Math.random()*theimage.length)
if(!tempimage[tempNum]){
tempimage[tempNum]=theimage[p];
break;
}
}
}
for(p=0;p<theimage.length;p++)theimage[p]=tempimage[p];
}
//if random order
SetRandom()
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
//set transitions
GetTrans();
//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
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Apply()')
document.images.imgslide.src=theimage[i][0];
if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')
}
//###########################################
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);
}
//###########################################
//desc: picks the transition to apply to the images
function GetTrans() {
//si=document.slideshow.trans.selectedIndex;
if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
dotrans=0;
}
else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
dotrans=1;
transtype='blendTrans';
document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
}else{
dotrans=1;
transtype='revealtrans';
if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
}
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}
</script>
then this is the little bit of html Code: <!-- 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>
</table>
</form>
<!-- end of slide show HTML -->
hope someone can shed a little light on this for me thank you Chris Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. |
|||||||