JavaScript - Multiple Image Change On Click

Hi,

I have a list of pictures like this:

<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&amp;pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&amp;pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&amp;pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&amp;pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a>
<a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&amp;pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a>

Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px.

Is this possible?

Thanks

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

Hey guys, so i have a small problem.
I have a comment area on my site.
And i have the comments set to a specific height, so it only shows so much text.
And i have a "read more ..." button

How would i make it so that when I click the read more button.
The CSS for the comment div changes to height:auto;

This is what i currently have, and its not working.

CSS
Code:

.tag_desc { clear:both; height:30px; overflow:hidden;  }

HTML
Code:

<div class="tag_read_more"><a onclick="document.getElementsByClassName('tag_desc').style.height = 'auto';">Read more ...</a></div>

Thanks in advance !!

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Hello
I need script that change link after first click

for example:

<a href=URL1 target=_blank><img src=....></img></a>

After click on this image , URL1 changes to URL2 and visitor when click on it again and again , it goes to URL2


Regards

I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it?

Code:

				function quote(id) {
					var shout = document.getElementById('shout');
					var currentShout = '; '.shout.value;
					var prefix = '@'.id;
					shout.value = prefix.currentShout;
				}

I call it by
Code:

<a href="#" onclick="javascript: quote('2');">Comment</a>

the input that changes is written as
Code:

						<input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);">

Doing a project for class and we are not allowed to use any libraries. That being said, I am having a problem getting my information to appear. I have looked over my code and have no problem what the problem is. I am a novice, first real class with in depth javascript implementation and it all appears on my final assignment.

What I am trying to get done is, when I click on one of the 4 images on the left column on my queue.html only those episodes of that show appear in the right column. So If I click on the Modern Family image only the 5 episdoes will appear on the right. Same for the other two. What happens with mine, is nothing. I spent all night on the code trying to get it to work and nothing is happening. Below are some of the parameters of this assignment.

-*‐ The queue page is a two-column layout. Column one (left) contains a list of saved shows, and column two (right) contains a list of episodes
-*‐ The queue page should use DOM scripting to update data, and at no point should a page refresh occur

I think I used the wrong element somewhere, but cant for the life of me figure it out. I hope someone can point me in the right direction.

http://sulley.dm.ucf.edu/~zz669709/d...nt3/queue.html - Queue Page(working on Modern Family function, other two once I get this one working)

http://sulley.dm.ucf.edu/~zz669709/d...ment3/js/a3.js - Javascript(Disregard Modal Window stuff, still working on that)

http://sulley.dm.ucf.edu/~zz669709/d...css/styles.css - css

Thank you.

Hello

I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link.
I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this?

I would really appreciate any help, thank you

below is the code

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')">
<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td>
    <td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td>
  </tr>
</table>

Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again.

Code:

   <script type="text/javascript"> 
      $(document).ready(function(){ 
   $('.accordion-content').hide(); 
   //toggle the componenet with class accordion 
   $('.accordion-toggle').click(function(){ 
      //$(this).toggleClass('toggle-accordion-active'); 
      $(this).next('.accordion-content').slideToggle(300); 
   }); 
   $('#accordion-expand-all').click(function(){ 
      $('.accordion-content').slideToggle(300); 
   }); 
      }); 
    </script>

Code:

<p><a id="accordion-expand-all" href="#">Show</a></p>

I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation.

and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images


please send me the code for it

I want to change the color of the gridview when a button which has the
value of the row index of the gridview is clicked ...this button is not inside the gridview but some where else on the form but it can send the gridview rowindex to the function so need a function to change the color of the row or bring it to focus in someway...

Greetings,

In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual.

At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu.

I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send.


As far as I can tell the name of the arrow being used to expand menu can be seen in this html...

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

<td class="wbtTdArrow" style="padding: 2px; border: 0px none;">
<a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)">
<img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;">
</a>
</td>


Here's the html containing the name of the item I'd like to use in addition to the arrow...

<td class="wbtTdSelected">
<img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item">
</td>

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text..
now what i need is a way to change all of these fields with a fetch button.
i can get the value for the fields from the perl script on my server side.

the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted .
i am struggling with the simplist of codes to set the value of the fields from a javascript variable
any ideas please.

Hi all,
I'm working on a script which is actually a very simple tab system.

Code:

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please?

I'm using the 1.2.0 version of mootools for this.

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?