JavaScript - Help With Adding Fadiin/fadeout To Image Hover

Good day all,

I was hoping someone could help me out with the following. I currently have a slideshow that as thumbnails under a main image. The thumbnails slide left and right with hover on a button and with a click changes main image without any problems.

Few things I am looking to change/add:

1. The ability to mouse over the main image and have the caption appear than disappear when the mouse is moved off. Currently I have the caption as a static text under the main image.

2. Start the thumbnail position in the middle instead of the left

3. Add mouseover buttons to the main image to give the ability to cycle through the images instead of having to always use the thumbnails.

Below I've include the Javascript code: Is this the best way or is there a better way?

Example of slideshow: http://neileverosborne.com/portfolios/manatees.html

JAVASCRIPT:
Code:

	var displayWaitMessage=true;	// Display a please wait message while images are loading?


	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}

	function releaseSlide()
	{
		var id = this.id;
		slideSpeed=0;
	}

	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;

			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}

			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);

	}

	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';
			activeImage.style.opacity = 0.5;
		}
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;
		activeImage = this;
	}

	function initSlideShow()
	{
		document.getElementById('arrow_left').onmousemove = startSlide;
		document.getElementById('arrow_left').onmouseout = releaseSlide;
		document.getElementById('arrow_right').onmousemove = startSlide;
		document.getElementById('arrow_right').onmouseout = releaseSlide;




		imageGalleryObj = document.getElementById('theImages');
		imageGalleryLeftPos = imageGalleryObj.offsetLeft;
		var galleryContainer = document.getElementById('galleryContainer');
		imageGalleryWidth = galleryContainer.offsetWidth - 20;
		maxGalleryXPos = imageGalleryObj.offsetLeft;
		minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;

		if (navigator.userAgent.indexOf('MSIE') >= 0) {
			var arrowWidth = document.getElementById('arrow_left').offsetWidth;
			var el = document.createElement('div');
			el.style.position = 'absolute';
			el.style.left = arrowWidth + 'px';
			el.style.width = (galleryContainer.offsetWidth - arrowWidth * 2) + 'px';
			el.style.overflow = 'hidden';
			el.style.height = '100%';

			document.getElementById('galleryContainer').appendChild(el);
			el.appendChild(document.getElementById('theImages'));
		}
		var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
		for(var no=0;no<slideshowImages.length;no++){
			slideshowImages[no].onmouseover = showImage;
		}

		var divs = imageGalleryObj.getElementsByTagName('DIV');
		for(var no=0;no<divs.length;no++){
			if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
		}
		gallerySlide();
	}

	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
		if(subImages.length==0){
			var img = document.createElement('IMG');
			document.getElementById('previewPane').appendChild(img);
		}else img = subImages[0];

		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath;

	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';
		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
		document.getElementById('largeImageCaption').style.display='block';

	}
	window.onload = initSlideShow;

Hi everyone,

Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc.

My problem is:
Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels.
I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu.

So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything.

Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect.

Thanks.

ps i can post the js code if wanted

Hello!

On this project I'm working on, my client asked me, if I could make an item fade out after some time. I said I'll try my best, even though I have no idea about javascript. So if anyone could help me, that would be awesome.
It's a div called "alert", that would disappear after ~15seconds, and wouldn't show back no mater how long the page is loaded.

Thanks, Greg

////delete, thanks :) ////

I'm trying to create a jquery nav that will show up in place of the existing paragraph or div with a ul, then on the mouse out replace the existing paragraph. I'm not not too experienced with javascript, so I'm hoping it's just a simple and easy fix.

This is what I have so far. I managed to get it to work, somewhat, but the paragraph shows up if you mouse off the main button over the ul. And for some reason it doesn't always show the menu on the mouse over, is picky about which ones it does.

Code:

$(document).ready(function(){ 
	var showMenu = function ( el, menu, p )
	{
		var o = $(el).offset();
		$(menu).clearQueue();
		$(menu).css( { "left":o.left-122 + "px", "top":o.top+40 + "px", "z-index":100  } );
		$(menu).stop().fadeIn(1);
		$(menu).mouseover( function () {
			$(this).clearQueue();
			$(this).stop().fadeIn(1);
		});
		$(menu).mouseout( function () {
			$(this).clearQueue();
			$(this).stop().fadeOut(1);
		});
		$(el).bind( 'mouseout', {target:menu}, function(e) {
			$(e.data.target).stop().fadeOut(1);
		});
		$(el).bind( 'mouseover', function() {
			$(p).fadeOut(1);
		});
		$(el).bind( 'mouseout', function() {
			$(p).fadeIn(1);
		});	
	}
	var n=0;
	$(document).ready(function() {
		$('a#learn').mouseover( function() { showMenu($(this),$('div.subnavlearn'),$('p.learn')); });
		$('a#connect').mouseover( function() { showMenu($(this),$('div.subnavconnect'),$('p.connect')); });
		$('a#act').mouseover( function() { showMenu($(this),$('div.subnavact'),$('p.act')); });
	});
});

see it live he http://dev.joshuadnelson.com/clients/postgrowth/

I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[


Code:

var windowState = false;

action1 = document.getElementById("action1");

function requestWindow(url) {

	if(windowState==false) {
		windowOpen();
	}
	else if(windowState==true) {
		windowClose();
	}
	
	if (window.XMLHttpRequest) {
		xmlhttp=new XMLHttpRequest();
	}
	
	else {
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.open("GET",url,false);
	xmlhttp.send(null);
	document.getElementById('action1').innerHTML=xmlhttp.responseText;

}

function windowOpen() {

	windowState = true;

	windowSize()

	action1.style.display = "none";
	
	$("#action1").fadeIn(1300);
	
	clearMenu();

}

function windowClose() {

	windowState = false;
	
	action1.style.display = "inline";
	
	$("#action1").fadeOut(1300);
	
	clearMenu();
	
	windowOpen();

}

Hi Guys,

I'm using jcarousellite to show my newsitems in a vertical carousel.
http://www.gmarwaha.com/jquery/jcarousellite/

The carousel itself works perfectly, now I'm trying to add that before the news scrolls upwards the top news-item fades-out first.

Now it is fading out the complete list and I simply can't seem to figure out how to 'talk' to the 'active/top' <li> in the list.


Can someone give me a hint?

Thanks in advance,
Marcel


-- Code Below --

Code:

$(function() {
	$(".widgetCarousel").jCarouselLite({
		circular: true,
		vertical: true,
		visible: 3,
		scroll: 1,
		start: 1,
		auto: 500,
		speed: 1000,
		beforeStart: function(a) {
			$(a).parent().fadeTo(100, 0);
    		},
		afterEnd: function(a) {
			$(a).parent().fadeTo(100, 1);
		}
    	});

});

<div class="widgetCarousel">
	<ul>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>
		<li>My very own news item</li>	
	</ul>	
</div>

I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it

do anyone know, how can i write fadein and fadeout functions? is anyone know its source code?

Best Morteza

Hi all

I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded.

Is there a way to either:

* Use javascript to make it so the image only loads when the link is hovered over?

or

* Allow the rest of the javascript on the page to run before the images are finished loading?

I think i'd prefer the first solution if possible but i'm open to all ideas.

Thanks in advance!

HI,

I am looking to enlarge an image when its hovered over, can anyone give me the code for this?

Thanks

Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this:

http://piscesmike.com/Pages/recipes/onions.html

The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob!

ok I have this image and i want the image to change upon the mouse hovering over it.

Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map.


I really need help on finding the code that would work...


This is what I have
Code:

<html>



<head>
</head>


<body>
<p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room"  /></p>

<map name="maps">
<area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" >
<area shape="rect" coords="130,215,185,277" href="greenroom.html#water">
<area shape="rect" coords="80,11,263,149" href="greenroom.html#tv">
</map>
.............

Ok. Basically, I will have images, about 150x100 that are all different.

They will be displayed on a page in groups of 4.

I want to make it so that if you hover over them, another image of the same size is put on top of that with part alpha.

To give you an idea of what I am doing, it will be like youtube videos when you hover over them except I want there to be an image centered.

I know this part of the code, but I don't know what to put inside it:

Code:

$(document).ready(function(){
	$("img").mouseenter(function(){
		//add image on top of this image
	})
	$("img").mouseleave(function(){
		//remove covering image
	})
})

What should I replace the comments with?

Thanks

Hey,

I want javascript to change the background image on hover.

This is my javascript:
Code:

function navOver(obj){
	var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
	obj.style.background='imgUrl';
}

function navOut(obj){
	var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
	obj.style.background='imgUrl';
}

and this is the HTML:
Code:

<li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li>

This doesn't work, can anyone help me and say me what to do?

Right i need some help with some code, i have been trying 2 days to get it to work!

basically the 3 image locations are in Variables in PHP

$piclocation1
$piclocation2
$piclocation3

What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image".

and so on

if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful!

this is the website page i am testing it on if you would like to look at if visually
http://www.wolverhampton-wanderers.co.uk/text.php

and here is the code:
Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3"; 
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;

while($row1 = mysql_fetch_array($news)){
	
if($counter == 1)
{
	$picture1 = $row1['imageID'];
	$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1"; 
	$image1 = mysql_query($getimage1) or die(mysql_error());
	$pic1 = mysql_fetch_array($image1);
	$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
	$picture2 = $row1['imageID'];
	$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2"; 
	$image2 = mysql_query($getimage2) or die(mysql_error());
	$pic2 = mysql_fetch_array($image2);
	$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
	$picture3 = $row1['imageID'];
	$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3"; 
	$image3 = mysql_query($getimage3) or die(mysql_error());
	$pic3 = mysql_fetch_array($image3);
	$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>


</head>

<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->

<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC"; 
$category = mysql_query($cat) or die(mysql_error());
$start = 1;

while($row = mysql_fetch_array($category)){
	$submenu = $row['sub-menu'];
		if($submenu == '1'){
    		echo "</li><li><a id='{$row['Active-ID']}' " .
        		 "href='{$row['Address']}'>" .
        		 "{$row['Text']}</a>";
				 }
		elseif($submenu == '2'){
			if($start == 1){
				echo "<ul>";
				}
			echo "<li><a id='{$row['Active-ID']}' " .
        		 "href='{$row['Address']}'>" .
        		 "{$row['Text']}</a></li>";
				 $start = $start + 1;
				 if($submenu !='2'){
					echo "</ul></li>";
					$start = 1;
				 }
			}
	}
	echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>

<div id="latest-news">

<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3"; 
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;

	echo "<div id='latest-news-image'></div>" .
		"<div id='latest-news-header'>Breaking News</div>";

while($row1 = mysql_fetch_array($news)){	
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>

</div>




</div>
</div>

</body>
</html>