/** * Author: Marco Dalicco --- 02.09.2009 * * Elenco parametri : * parent: object --> il nodo parent al quale l'oggetto sarà agganciato. * renderType: string --> la stringa che definisce il tag che sarà renderizzato ('img','div'...). Nel caso di oggetti diversi da 'img' * lo style sarà dichiarato in-line utilizzando 'background' e come url il parametro srcImg passato. * [link]: string --> da passare se si vuole che al click l'immagine linki ad un sito esterno (es. 'http://.......com/...') * [action]: f(x) --> da passare se si vuole che al click sul'immagine si esegua la funziona passata * [scrImg]: string --> url completo all'immagine da visualizzare * [cssStyle]: string --> se valorizzato applicherà una classe di stile all'immagine (da usare al posto di srcImg) * [altText]: string --> se valorizzato il tag IMG avrà l'attributo Alt e l'attributo Title valorizzati alla stringa passata * [height]: string --> se si utilizza un renderType != da IMG la options diventa [req] * [width]: string --> se si utilizza un renderType != da IMG la options diventa [req] * * es. * imgtemp = new imgItem( { p_Parent: document.getElementById("prova"), p_RenderType: 'DIV', p_CssStyle:{ 'on':'sfcslider_sx_active', 'off':'sfcslider_sx_inactive', 'over':'sfcslider_sx_interazione', 'start':'on' }, p_AltText : 'Alt text per image', //p_Link : 'http://www.google.com' p_Action: function(){alert('f(x) Link');}, p_Width:'14px', p_Height: '9px' }); imgtemp.renderImg(); * * */ function imgItem(options) { this.imgElement=null; // var obj = this; //*********************** Options *************************************************************************** this.options = options; this.link = (this.options['p_Link'] != null ? this.options['p_Link'] : "" ); this.action = (this.options['p_Action'] != null ? this.options['p_Action'] : "" ); this.srcImg = (this.options['p_SrcImg'] != null ? this.options['p_SrcImg'] : null ); this.altText = (this.options['p_AltText'] != null ? this.options['p_AltText'] : "" ); this.cssStyle = (this.options['p_CssStyle'] != null ? this.options['p_CssStyle'] : null ); this.parent = (this.options['p_Parent'] != null ? this.options['p_Parent'] : "" ); this.renderType = (this.options['p_RenderType'] != null ? this.options['p_RenderType'] : "" ); this.height = (this.options['p_Height'] != null ? this.options['p_Height'] : "" ); this.width = (this.options['p_Width'] != null ? this.options['p_Width'] : "" ); this.id = (this.options['p_Id'] != null ? this.options['p_Id'] : "" ); //*********************************************************************************************************** //******************** SET *************************************** this.setAction = function (p_Action) {this.action = (p_Action != null? p_Action : ""); }; this.setLink = function (p_Link) {this.link = (p_Link != null? p_Link : ""); }; this.setSrcImg = function (p_SrcImg) {this.srcImg = (p_ScrImg != null? p_SrcImg : null); }; this.setAltText = function (p_AltText) {this.altText = (p_AltText != null? p_AltText : ""); }; this.setCssStyle = function (p_CssStyle) {this.cssStyle = (p_CssStyle != null? p_CssStyle : null); }; this.setParent = function (p_parent) {this.parent = (p_parent != null? p_parent : ""); }; this.setRenderType = function (p_renderType) {this.renderType = (p_renderType != null? p_renderType : ""); }; this.setWidth = function (p_width) {this.width = (p_width != null? p_width : ""); }; this.setHeight = function (p_height) {this.height = (p_height != null? p_height : ""); }; this.setId = function (p_id) {this.id = (p_id != null? p_id : ""); }; //******************** FINE SET ************************************ //******************** GET ***************************************** this.getAction = function() {return this.action; }; this.getLink = function() {return this.link ; }; this.getSrcImg = function() {return this.srcImg; }; this.getAltText = function() {return this.altText; }; this.getCssStyle = function() {return this.cssStyle; }; this.getParent = function() {return this.parent; }; this.getRenderType = function() {return this.renderType; }; this.getWidth = function() {return this.width; }; this.getHeight = function() {return this.height; }; this.getId = function() {return this.id; }; //******************** FINE GET ************************************ //************* Renderizzazione TAG Img in un punto specifico del DOM + associazione eventi. ************ this.renderImg = function(){ this.imgElement = document.createElement(this.renderType); this.clickFx= true; if(this.cssStyle!=null){ if((this.cssStyle['start']!="" && this.cssStyle['start']=='off')){ this.clickFx= false; } } if(this.srcImg!=null){ if((this.srcImg['start']!="" && this.srcImg['start']=='off')){ this.clickFx= false; } } if(this.altText!=""){ this.imgElement.setAttribute('alt', this.altText); this.imgElement.setAttribute('title', this.altText); } if(this.id!="") this.imgElement.setAttribute('id', this.id); //CASO IMG SEMPLICE if(this.renderType.toUpperCase()=='IMG'){ //****** setto gli attributi che sono stati valorizzati ******* if(this.cssStyle!=null){ this.imgElement.setAttribute('class', this.cssStyle[this.cssStyle['start']]); } else if(this.srcImg!=null){ this.imgElement.setAttribute('src', this.srcImg[this.srcImg['start']]); } this.imgElement.setAttribute('border', '0'); //************************************************************** //*********** Associazione degli eventi ******************* if(this.imgElement.addEventListener){ // mozzilla: mozilla si scrive con una sola _z_ this.imgElement.addEventListener('click',click,false); this.imgElement.addEventListener('mouseover',mouseoverImgSrc,false); this.imgElement.addEventListener('mouseout',mouseoutImgSrc,false); }else{ // ie this.imgElement.attachEvent('onclick', click); this.imgElement.attachEvent('onmouseover', mouseoverImgSrc); this.imgElement.attachEvent('onmouseout', mouseoutImgSrc); } //*************END Associazione degli eventi************************** } //CASO /* else { if(this.srcImg!=null){ // con stili in linea this.imgElement.setAttribute('style','background:transparent url('+this.srcImg[this.srcImg['start']]+') no-repeat scroll 0 0;'+ 'width:'+this.width+';'+ 'height:'+this.height); if(this.cssStyle!=""){ this.imgElement.setAttribute('class', this.cssStyle[this.cssStyle['start']]); } }else { // con stili CSS this.imgElement.setAttribute('class', this.cssStyle[this.cssStyle['start']]); } }*/ //**** renderizzo l'oggetto come figlio dell'elemento parent passato al costruttore **** if(this.parent!=""){ this.parent.appendChild(this.imgElement); } //************************************************************************************** }; //************************END renderImg ************************************************************************* //************************ FUNZIONI EVENTI MOUSE ***************************************************** function click(e){ /* var e=e? e : window.event; var el=e.target? e.target : e.srcElement;*/ if(obj.clickFx) manageLink(obj); } /*function mouseover(e){ //if(obj.cssStyle['over']!="" if(obj.cssStyle!=null && obj.cssStyle['over']!="" && eval(obj.imgElement.attributes['class']) && !(obj.imgElement.attributes['class']['nodeValue'] == obj.cssStyle['off'])){ cssRollOver( obj,'over'); }else if(obj.srcImg!="" && eval(obj.imgElement.attributes['src']) && !(obj.imgElement.attributes['src']['nodeValue'] == obj.srcImg['off'])){ srcRollOver( obj,'over'); }else if(eval(obj.imgElement.attributes['style']) && (obj.imgElement.attributes['style']['nodeValue']).indexOf(obj.srcImg['off'])==-1){ //div con style inline srcRollOver( obj,'over'); } }*/ function mouseoverImgSrc(e){ if(!(obj.imgElement.attributes['src']['nodeValue'] == obj.srcImg['off'])){ srcImgRollOver( obj,'over'); } } function mouseoutImgSrc(e){ if(!(obj.imgElement.attributes['src']['nodeValue'] == obj.srcImg['off'])){ srcImgRollOver( obj,'out'); } } /*function mouseout(e){ if(obj.cssStyle['over']!="" && eval(obj.imgElement.attributes['class']) && !(obj.imgElement.attributes['class']['nodeValue'] == obj.cssStyle['off'])){ cssRollOver( obj,'out'); }else if(obj.srcImg!="" && eval(obj.imgElement.attributes['src']) && !(obj.imgElement.attributes['src']['nodeValue'] == obj.srcImg['off'])){ srcRollOver( obj,'out'); }else if(eval(obj.imgElement.attributes['style']) && (obj.imgElement.attributes['style']['nodeValue']).indexOf(obj.srcImg['off'])==-1){ //div con style inline srcRollOver( obj,'out'); } }*/ //************************ END FUNZIONI ESECUZIONE EVENTI MOUSE ***************************************************** //********************* Rimuove il TAG img dal punto passato ********************************************************** this.removeImg = function(){ if(this.imgElement!=null) this.parent.removeChild(this.imgElement); }; //********************************************************************************************************************* //****************** IMPOSTA L'IMMAGINE COME INATTIVA ***************************************************************** this.setInactive = function(){ if(this.imgElement!=null){ this.clickFx=false; // inibisce l'esecuzione della fx sul click. if(this.cssStyle['over']!="" && eval(this.imgElement.attributes['class'])) { this.imgElement.setAttribute('class', this.cssStyle['off']); }else if(this.srcImg!="" && eval(this.imgElement.attributes['src'])) { this.imgElement.setAttribute('src',this.srcImg['off']); }else{ //div con style inline this.imgElement.setAttribute('style','background:transparent url('+this.srcImg['off']+') no-repeat scroll 0 0;'+ 'width:'+this.width+';'+ 'height:'+this.height); } } }; //****************************END setInactive****************************************************************** //****************** IMPOSTA L'IMMAGINE COME ATTIVA ***************************************************************** this.setActive = function(){ if(this.imgElement!=null){ this.clickFx=true; // inibisce l'esecuzione della fx sul click. if(this.cssStyle['over']!="" && eval(this.imgElement.attributes['class'])) { this.imgElement.setAttribute('class', this.cssStyle['on']); }else if(this.srcImg!="" && eval(this.imgElement.attributes['src'])) { this.imgElement.setAttribute('src',this.srcImg['on']); }else{ //div con style inline this.imgElement.setAttribute('style','background:transparent url('+this.srcImg['on']+') no-repeat scroll 0 0;'+ 'width:'+this.width+';'+ 'height:'+this.height); } } }; //****************************END setActive****************************************************************** //*************************************** Private methods implementation *************************************** // agisce se si vuole un rollOver cambiando src /*function srcRollOver(obj,p_){ if(p_=='over'){ if(obj.renderType.toUpperCase()=='IMG'){ obj.imgElement.setAttribute('src',obj.srcImg['over']); }else{ obj.imgElement.setAttribute('style','background:transparent url('+obj.srcImg['over']+') no-repeat scroll 0 0;'+ 'width:'+obj.width+';'+ 'height:'+obj.height); } }else if(p_=='out'){ if(obj.renderType.toUpperCase()=='IMG'){ obj.imgElement.setAttribute('src',obj.srcImg['on']); }else{ obj.imgElement.setAttribute('style','background:transparent url('+obj.srcImg['on']+') no-repeat scroll 0 0;'+ 'width:'+obj.width+';'+ 'height:'+obj.height); } } }*/ function srcImgRollOver(obj,p_){ if(p_=='over'){ obj.imgElement.setAttribute('src',obj.srcImg['over']); }else if(p_=='out'){ obj.imgElement.setAttribute('src',obj.srcImg['on']); } } //agisce se si vuole un rollOver cambiando classe css function cssRollOver(obj,p_){ if(p_=='over'){ obj.imgElement.setAttribute('class', obj.cssStyle['over']); }else{ obj.imgElement.setAttribute('class', obj.cssStyle['on']); } } //agisce sul click function manageLink(obj){ // alert('manageLink'); if(typeof obj.action == 'function'){ obj.action(); }else if (typeof obj.action == 'string'){ document.location.href = obj.link; } } //***********************************END Private methods implementation****************************** }