JavaScript - Image.src Problem

Hi,

Im using the following javascript to cycle through 3 images on my website header.

http://www.dynamicdrive.com/dynamici...nslideshow.htm

However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page.

is there anyone who could help me?

Hi guys,

I have this little snippet of code that swaps a toggle image for news for a plus or minus sign showing if the div is open or closed. This code has worked before but i made a couple modifications today and it stopped working unexpectedly and i'm not sure why its failing.

I am presetting the div tag with a plus sign with css and then modifying it with javascript. The problem i am having is that when the div tag has been opened it does not swap the image to min.gif anylonger. It remains max.gif.


Here's the javascript code
Code:

	var News_Images = new Array();
	News_Images[0]="images/max.gif"
	News_Images[1]="images/min.gif"

function DisplayNews(body,box,link,id){
		
		$(body + " > div > .news_box").each(function(){
	        if($(this).css("display")=="block"){
	        	$(this).slideToggle("slow");
	        }
	     });

	     $(body + " > div > a[class='open_button_closed']").each(function(){ // search and change the + / - images
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     $(body + " > div > a[class='open_button']").each(function(){
	     	  $(this).css("background-image",'url('+script_path+News_Images[0]+')');//
	     });

	     if($(body + " > div > #"+box+id).css("display")=="none"){
	     	$(body + " > div > #"+box+id).slideDown("slow");
			
	     	$(body + " > div > #"+link+id).css("background-image",'url('+script_path+News_Images[1]+')');//
			alert("box =" + box + " id = " + id + " link =" + link);
	     }
	}

And here is the html sample
Code:

    <div class="recent_news_box">
    <a onclick="DisplayNews('#display_recent','news_link','open_button',3); return false;" id="open_button3" class="open_button"></a>
    <a class="link_block" href="">Some Title Text</a>
        <div style="display: none;" class="news_box" id="news_link3">
        <img class="front_image" alt="" src="" align="right">
        <span class="date">Jul 21, 2009</span>
        <div>Some Stuff to display here will be short text</div>											
        </div>
    </div>

Thanks in advance.

All,

I am trying to create a page for a application that uses a technique where a page refresh is generated by an ajax call followed by an innerhtml replace on the main page div.

Unfortunately this strange way of refreshing pages is leading to an issue with an image I am trying to display. Every time it refreshes the images flashes off and then is redisplayed, there are other elements on the page( smaller images, text etc... ) and they do not seem to be affected.

The image is not large, only 23 k, but it is the only one affected. If I run the page on firefox I do not encounter this issue which makes me think that is a lovely IE feature that forces the image to be retrived from the server on every innerhtml replace instead of from the cache.

I am using IE8 to test this, any suggestions are greatly appreciated as I have been trying to fix this for a while.

Thanks,
N

Hi,

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:

Code:

// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
                              "header/images/tankimage2.gif", 
                              "header/images/tankimage3.gif",
                              "header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:

Code:

 <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>"  type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:

Code:

<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:

Code:

<span class="fadingimages">
                <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage"  />
            </span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated.


Thank you,
petela

Hi ,

Pls solve it

Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading.


what might be the problem ..pls solve it .......its too urgent

thanks in advance

nagaraja kharvi

Hi all,

Javascript is totally new to me and I am very frustrated. I have been trying to put together this ebay template and it's all set except I can't get my thumbnails to show the large image when you mouseover it! I believe my problem is that I don't have the <script type="text/javascript"> or <language=javascript> tag in the beginning of the template. Problem is im not sure if that's the prob or where to put it!! I tried putting it at the top and it made it so the whole template disappeared. I've tried putting it at various diff places and it messes the whole thing up. I'm lost! Please help! Here's the listing (sorry I would post just the part where there's an issue but I can't tell where that is! )

http://cgi.ebay.com/ws/eBayISAPI.dll...%3DI%26otn%3D2

Hello all;

I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code:

Code:

<body> 
    <canvas id="worldscreen" class="map"></canvas><br  />

<script type="text/javascript">  
    function loadImages(arrow, call) {
    var images = {};
    var loaded = 0;
    var num = 0;
    for (var src in arrow) {
        num++;
    }
    for (var src in arrow) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loaded >= num) {
                call(images);
            }
        };
        images[src].src = arrow[src];
    }
}
 
window.onload = function(images) {
    var canvas = document.getElementById("worldscreen").getContext("2d");
 
    var arrow = {
        top: "sideQUEST/images/arrow-top.png",
		right: "sideQUEST/images/arrow-right.png",
		bottom: "sideQUEST/images/arrow-bottom.png",
        left: "sideQUEST/images/arrow-left.png",
    };
 
    loadImages(arrow, function(images) {
        canvas.drawImage(images.top, 100, 18);
		canvas.drawImage(images.right, 215, 36);
		canvas.drawImage(images.bottom, 100, 115);
        canvas.drawImage(images.left, 36, 36);
    });
};
</script>
</body>

You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you.

I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks
js code
Code:

var sel = document.getElementById("sw");
function f1(){
   var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
   var im = document.getElementById("pic");
   im.src = imgs[this.selectedIndex]; 
}

html code
Code:

<img id="pic" src="chart1.cgi" />

<select name="sw" id="sw" onchange = "f1()" >
   <option value="s1">what</option>
   <option value="s2">whatever 2</option>
   <option value="s3">whatever 3</option>
   <option value="s4">whatever 4</option>
</select>

Hello,

I am working on my site http://www.alvadesign.com and trying to incorporate an image menu like the one at http://www.phatfusion.net/imagemenu/index.htm. I am new to javascripting and just begining to learn. I have the menu showing up now but not functioning upon rollover. This is all being done in a wordpress theme. This uses mootools.js and truthfully anything I did could be wrong at this point. Im not sure what im doing wrong and any help is greatly appreciated.
Thank you,

Alva
www.alvadesign.com

Hi, I'm having a problem getting one of my image rollovers to work, what confuses me is that the other image works fine, I'm trying to get this to
work for an assignment

here's the javascript:
Code:

rollImage = new Array()
	
	for(i = 0; i < 12; i++){
		
		rollImage[i] = new Image(85,85);
	}
	

 
  rollImage[0].src = "images/narav2.jpg";
  rollImage[1].src = "images/narav3.jpg";
  rollImage[2].src = "images/sasuke-avatar-118.jpg";
  rollImage[3].src = "images/sasuke.jpg";
  
  

  function swapNar(img){       //this works fine
    document.nar11.src = rollImage[img].src;
    return true;
  }

  function returnNar(img){     //this function works fine as well
    document.nar11.src = rollImage[img].src; 
    return true;
  }

  function swapSas(img){                    //this function not working
	document.sasim.src = rollImage(img).src;
    return true;
  }
  
  function returnSas(img){                         //this function also not working
	document.sasim.src = rollImage(img).src;
    return true;
  }

Here's the HTML:

Code:

<tr>
 <td height="60">
 <img src="images/narav2.jpg" name="nar11" width="85" height="85" border="0" id="nar11"/> 
 </td>
    
 <td>
 
 <a href="naruto.html" onMouseover = "swapNar(1)" onMouseout = "returnNar(0)"> Naruto </a>

 </td>
</tr>

<!-- When I mouse over the above link the image rolls over as expected,
      the bottom link doesn't work as expected and I can't see what I'm
      doing wrong -->



<tr>
<td height="60">
<img src="images/sasuke-avatar-118.jpg" name="sasim" width="85" height="85" border="0" id="sasim"/>
</td>

<td>

<a href="sasuke.html" onMouseout= "swapSas(3)" onMouseover= "returnSas(2)"> Sasuke </a>

</td>


</tr>

I can't see what the problem is with the returnSas and swapSas functions,
I'm still a noob at this and would really appreciate some assistance,
thanks in advance

Hello all,

I want to set dynamically a div's background image when the page loads, so I have my code like so:

javascript code:

window.onload = init;

function init(){
$(document).ready(function(){
$('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)');
$('#pg1').css('color', 'black');
$('#pg1').css('font-weight', 'normal');
});
}

My CSS stylesheet is like so:

#buttonsWrapper {
position:relative;
margin 50px 0px 0px 0px;
}

.buttons {
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
font-weight:bold;
color:#FFF;
}

#button1 { margin: 31px 0px 0px 0px; }
#button2 { margin: -43px 0px 0px 195px; }
#button3 { margin: -43px 0px 0px 390px; }
#button4 { margin: -43px 0px 0px 585px; }
#button5 { margin: -43px 0px 0px 780px; }

#button1, #button2, #button3, #button4, #button5 {
width:172px;
height:33px; /* 33px */
padding-top:10px;
text-align:center;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
background-image:url(../imagenes/buttonNormal.jpg);
background-repeat:no-repeat;
background-position:top;
}

My HTML sourcecode is like so:

<div id="buttonsWrapper">
<div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div>
<div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div>
<div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div>
<div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div>
<div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div>
</div>

The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong?

Thank you so much in advance...

its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out?

Code:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns = "http://www.w3.org/1999/xhtml">
	<head>	
		<title>Test 4</title>
			<script type = "text/javascript">
				function preload(){
					images = new Array();
						images[0] = new Image();
							images[0].src = "image1.png";
						images[1] = new Image();
							images[1].src = "image2.gif";
						images[2] = new Image();
							images[2].src = "image3.png";
						images[3] = new Image();
							images[3].src = "image4.jpg";
						images[4] = new Image();
							images[4].src = "image5.gif";
				}
				function bloat(){
					if(document.getElementById("image1").onMouseOver === true){
						document.getElementById("main").src = "image1.png";}
					else if(document.getElementById("image2").onMouseOver === true){
						document.getElementById("main").src = "image2.gif";}
					else if(document.getElementById("image3").onMouseOver === true){	
						document.getElementById("main").src = "image3.png";}
					else if(document.getElementById("image4").onMouseOver === true){
						document.getElementById("main").src = "image4.jpg";}
					else(document.getElementById("image5").onMouseOver === true){
						document.getElementById("main").src = "image5.gif";}
				}

			</script>
	</head>
	<body onLoad = "preload();" bgcolor = "orange"><center>
			<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
		<a href = "http://www.joystiq.com">
			<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
		<a href = "http://www.engadget.com">
			<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
		<a href = "http://www.amazon.com">
			<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
		<a href = "http://www.newegg.com">
			<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
		<a href = "http://www.smc.edu">
			<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
	</center></body>
</html>

so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page.

i got everything formatted right however i think there is an error with my function. any insight fellas? thanks!

I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.

Code:

 $(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});
</script>

I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.

Code:

.fadein { 
	  position:relative;
	  width:100%;
	  height:300px;
	  background-color:#000; 
	  overflow:hidden
}

.fadein img { 
	  position:relative;
	  left:300px;
	  width:auto;
	  text-align:center;
	  top:0px;
}

jonathaneiger.com