Jump to content

Change Image with onlick event

gilgimech

By gilgimech
in Javascript Help

 Share

Recommended Posts

gilgimech Member

gilgimech

Posted
Posted

I don't know allot of javascript and I've been fight with this all day.

 

I have a a div that expands when you click on the expand image/button. It's a down arrow.

 

What I want to do is when you click the down arrow image. To replace it with a up arrow image, and back when you click it again.

 

Here's what I'm trying to work with.

<script type="text/javascript">
var img1 = ../images/arrow.png;
var img2 = ../images/arrow2.png;
var imageChoice = 1;

function imageChange(element) {

if (imageChoice == 1) {
element.src == img2;
imageChoice = 2;
}
else if (imageChoice == 2) {
element.src == img1;
imageChoice = 1;
}



<a href="javascript:animatedcollapse.toggle('news')"><img src="../images/arrow.png" width="15" height="15" onclick="imageChange(this);" /></a>
</script>

 

Link to comment
Share on other sites
plutomed Member

plutomed

Posted
Posted

Try this:

<script type="text/javascript">
var img1 = "../images/arrow.png";
var img2 = "../images/arrow2.png";
var imageChoice = 1;

function imageChange(element) 
{
if (imageChoice == 1)
{
	element.src = img2;
	imageChoice = 2;
}
else if (imageChoice == 2) 
{
	element.src = img1;
	imageChoice = 1;
}
}
</script>
<img src="../images/arrow.png" width="15" height="15" onclick="imageChange(this);" />

 

I changed:

  • Quotes around img1 and img2
  • You were using double equals on assignment of the new images
  • You had your img tag inside the script tags
  • Missing the closing tag on your function

 

;)

 

Link to comment
Share on other sites
brianlange Regular Member

brianlange

Posted
Posted

The jQuery toggle function is great for this sort of thing. The toggle function takes two parameters and will alternate executing each one.  Here completes html. You can also an a empty image tag in the div and set the src attribute using jQuery. This might be slightly faster than using the html function.

The toggle function can also accept more than two arguments. In this scenario, it will cycle through all the arguments.

 

<html>

<head>

<title>jQuery</title>

 

    <script src="jquery1.4.js"></script>

 

  <script>

      $(document).ready(function() {

         

          $('#realtown').toggle(function() {

                $(this).html('<img alt="real estate articles" src="http://www.realtown.com/img/buttons/realtown-article_btn.png" border="0">');

            }, function() {

                $(this).html('<img alt="real estate blogs" src="http://www.realtown.com/img/buttons/realtown-blogs_btn.png" border="0">');

          });

      });

  </script>

</head>

<body>

 

<div id="realtown">

    <img alt="real estate blogs" src="http://www.realtown.com/img/buttons/realtown-blogs_btn.png" border="0">

</div>

 

 

 

</body>

</html>

Link to comment
Share on other sites
gilgimech Member

gilgimech

Posted
  • Author
Posted

Hmm....

 

That seemed to work, kinda.

 

I think it's conflicting with the div collapse. the first div will change the image, but won't collapse. the rest collapse but won't change the image.

 

Here's the page I'm working on.

http://www.netgamegurus.com/news/

 

Here all the code

 

Call the javascript

<script type="text/javascript" src="../includes/1.4.1_jquery.js"></script>
<script type="text/javascript" src="../includes/animatedcollapse.js"></script>

 

animatedcollapse.js

var animatedcollapse={
divholders: {}, //structure: {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structure: {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structure: {lastactivediv.id}
preloadimages: [],

show:function(divids){ //public method
if (typeof divids=="object"){
	for (var i=0; i<divids.length; i++)
		this.showhide(divids[i], "show")
}
else
	this.showhide(divids, "show")
},

hide:function(divids){ //public method
if (typeof divids=="object"){
	for (var i=0; i<divids.length; i++)
		this.showhide(divids[i], "hide")
}
else
	this.showhide(divids, "hide")
},

toggle:function(divid){ //public method
if (typeof divid=="object")
	divid=divid[0]
this.showhide(divid, "toggle")
},

addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
	var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
	return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},

showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
	var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
	if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
		if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
			this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
			this.slideengine(divid, 'show')
		targetgroup.lastactivedivid=divid //remember last active DIV
	}
	else{
		this.slideengine(divid, action)
	}
}
},

slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
	var animateSetting={height: action}
	if ($divref.attr('fade'))
		animateSetting.opacity=action
	$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
		if ($togglerimage){
			$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
		}
		if (animatedcollapse.ontoggle){
			try{
				animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
			}
			catch(e){
				alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
			}
		}
	})
	return false
}
},

generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
	if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
		map[arguments[i][0]]=arguments[i][1]
	}
}
return map
},

init:function(){
var ac=this
jQuery(document).ready(function($){
	animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
	var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
	var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
	var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
	if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
		persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
	groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
	jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
		this.$divref=$('#'+this.id)
		if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
			var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
		}
		else{
			var cssdisplay=this.getAttr('hide')? 'none' : null
		}
		if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
			cssdisplay='block' //set div to "block", overriding any other setting
		}
		else if (urlparamopenids[0]=="none"){
			cssdisplay='none' //set div to "none", overriding any other setting
		}
		this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
		this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
		if (this.getAttr('group')){ //if this DIV has the "group" attr defined
			var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
			targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
			if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
				targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
				targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
			}
			if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence								
				targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
			this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
		}
	}) //end divholders.each
	jQuery.each(ac.divgroups, function(){ //loop through each group
		if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
			ac.divholders[this.lastactivedivid].$divref.show()
	})
	if (animatedcollapse.ontoggle){
		jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
			animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
		})
	}
		//Parse page for links containing rel attribute
	var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
	$allcontrols.each(function(){ //loop though each control link
		this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
		if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
			animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
			$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
			ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
			ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
		}
		$(this).click(function(){ //assign click behavior to each control link
			var relattr=this.getAttribute('rel')
			var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array 
			if (divids.length>0){
				animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
				return false
			}
		}) //end control.click
	})// end control.each

	$(window).bind('unload', function(){
		ac.uninit()
	})
}) //end doc.ready()
},

uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
	if (this.$divref.css('display')!='none'){
		opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
	}
	if (this.getAttr('group') && this.getAttr('persist'))
		groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},

getCookie:function(Name){ 
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
	return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
	var expireDate = new Date()
	expireDate.setDate(expireDate.getDate()+days)
	document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
	document.cookie = name+"="+value+"; path=/"
},

urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},

preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
	if (arguments[i] && arguments[i].length>0){
		preloadimages[preloadimages.length]=new Image()
		preloadimages[preloadimages.length-1].src=arguments[i]
	}
}
}

}

 

brianlange's image swap script

<script type="text/javascript">
$(document).ready(function() {
           
          $('#open_close_arrow').toggle(function() {
                $(this).html('<img src="../images/arrow.png" >');
            }, function() {
                $(this).html('<img src="../images/arrow2.png">');
          });
       });
</script>

 

animatedcollaps script

<script type="text/javascript">

animatedcollapse.addDiv('g4news', 'fade=1')
animatedcollapse.addDiv('worldsinmotionnews', 'fade=1')
animatedcollapse.addDiv('gamesetwatchnews', 'fade=1')
animatedcollapse.addDiv('fingergamingnews', 'fade=1')
animatedcollapse.addDiv('freelanceflashgamesnews', 'fade=1')
animatedcollapse.addDiv('indiegamesnews', 'fade=1')
animatedcollapse.addDiv('gamerbytesnews', 'fade=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

 

The div's that uses the scripts

       <div class="news_title">
	<div id="news_title_txt">
	<a href="http://g4tv.com/">G4TV - The Feed</a>
                    <div id="open_close_arrow">
              	      <a href="javascript:animatedcollapse.toggle('g4news')"><img src="../images/arrow2.png" width="15" height="15"/></a>
            	   </div>
     </div>
    	</div>

       <div class="news_title">
	<div id="news_title_txt">
	<a href="http://worldsinmotion.biz/">Worlds In Motion</a>
                    <div id="open_close_arrow">
              	      <a href="javascript:animatedcollapse.toggle('worldsinmotionnews')"><img src="../images/arrow2.png" width="15" height="15"/></a>
            	   </div>
     </div>
    	</div>

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.