JavaScript - Javascript + Directory, Image Gallery Effect

Hi everyone,

I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this...



Here is the CSS I used to create the look of the "buttons"...

Code:

div.btn_workshops {
	background-image: url(../images/btn_workshops_mid.gif);
	background-position: top left;
	background-repeat: repeat-x;
	cursor: pointer;
	height: 22px;
	margin-bottom: 1px;
	width: 330px;
}
div.btn_workshops_lt {
	background-image: url(../images/btn_workshops_lt.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%px;
}
div.btn_workshops_rt {
	background-image: url(../images/btn_workshops_rt.gif);
	background-position: 100% 0;
	background-repeat: no-repeat;
	height: 100%;
	padding: 3px 12px 0px 12px;
	width: 100%px;
}
.hide {
	display: none;
	visibility: hidden;
}
.show {
	display: block;
	visibility: visible;
}

Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript.

Code:

<div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
											</div>
										</div>
									</div>
                                    <div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: October 9, 16, 23, and 30<br />
                                        Hours: 2:30pm - 5:30pm<br />
                                        Tuition: $250</p>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop2')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
											</div>
										</div>
									</div>
                                    <div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
                                        Dates: 2/19, 2/26, 3/5, and 3/12<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $275
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop3')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
											</div>
										</div>
									</div>
                                    <div id="workshop3" class="hide">Instructor: Tom Hampton<br />
                                        Dates: August 7 and 14<br />
                                        Time: 9am - 4pm<br />
                                        Tuition: $150
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop4')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
											</div>
										</div>
									</div>
                                    <div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: February 19 - April 23<br />
                                        Time: 6pm - 9pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>
                                    <div class="btn_workshops" onclick="expandWorkshops('workshop5')">
                                    	<div class="btn_workshops_lt">
                                        	<div class="btn_workshops_rt">
                                        		<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
                                                <img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
											</div>
										</div>
									</div>
                                    <div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
                                        Dates: June 5, 12, 19, and 26<br />
                                        Time: 10am - 1pm<br />
                                        Tuition: $200
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
									</div>

Here is the JavaScript I used to create the expand/collapse effect...

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}

Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information.

Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance.



This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow.



This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again.

Code:

function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together.

Code:

//Expand Workshops
function expandWorkshops(obj) {
	var workshop = document.getElementById(obj)
	if ( workshop.className != "hide" )
		{ workshop.className = 'hide' }
	else { workshop.className = 'show'	}
}
function flipArrow() {
	if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
	else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
		{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}

The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion.

Thanks for your help!

http://www.javascriptkit.com/javatut...rnalphp2.shtml


Anyone have a decent way of adding a fade affect to this script?

Hi! I'm wondering if somebody here could help me please. I'm trying to develope the image slideshow using PHP and JavaScript. The idea is that the PHP file gets random images from the folder, i'm using session to prevent repeating the same image and then JavaScript generates the fade slideshow using that PHP file. I've come up with the solution to use two img tags in the HTML page, so JavaScript then swap them around and play with opacity, but unfortunately couldn't make it work. Everything I have tried in JavaScript didn't work properly. I'd be grateful for any help and advice guys. Thank you.

My PHP code:

PHP Code:
<?php 
class images {

    var $images = Array();
    var $imgDir = 'images/';
    
    function getImages() {
        $images = Array();
        if ($dir = opendir($this->imgDir)) {
            while(($file = readdir($dir)) !== false) {
                if(preg_match('#(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)#i', $file)) $images[] = $file;
            }
            closedir($dir);
        }
        return $images;
    }
    
    function getNextImage() {
        if (($images = $this->getImages()) !== false) {
            session_start();
            if (!isset($_SESSION['image'], $images[$_SESSION['image']])) {
                $index = mt_rand(0, count($images)-1);
            } else {
                $index = $_SESSION['image'] == count($images)-1 ? 0 : $_SESSION['image']+1;
            }
            $_SESSION['image'] = $index;
            return $images[$index];
        }
        return false;
    }
    
    function outputImage() {
        if (($file = $this->getNextImage()) !== false) {
            header('Cache-Control: no-cache, must-revalidate'); // HTTP/1.1
            header('Expires: Wed, 9 Dec 1981 07:00:00 GMT'); // Date in the past
            header('Content-type: image/jpg');
            readfile($this->imgDir.$file);
            exit();
        }
    }
}
$img = new images();
$img->outputImage();
?>

My HTML page:

Code:

<html>
<head>
<title>Images</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="javascript/slideshow2.js" language="javascript"></script>
</head>

<body onload="startSlideShow();">
<h1>Images</h1>
<div id="imageWrap">
	<div id="images">
		<img id="sampleImgFade" src="images.php" alt="images" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;" width="800" height="600" onload="coverLoaded(this);" />
		<img id="sampleImg" src="images.php" width="800" height="600" alt="images" onload="mainLoaded();" />
	</div>
</div>
</body>
</html>

CSS code:

Code:

#imageWrap {
	clear: both;
}
#images {
	position: relative;
	clear: both;
}
#sampleImgFade {
	position: absolute;
	top: 0px;
	left: 0px;
}

JavaScript code which doesn't work properly(just to show in which direction I'm going):

Code:

var img;
var loaded = new Array();
loaded['start'] = true;
loaded['main'] = false;
loaded['cover'] = true;
var fade = 0;
var i = 0;
function getImage() {
	img = new image();
	img.src = "images.php";
}
function coverLoaded(obj) {
	loaded['cover'] = true;
	setOpacity(obj, 100);
	window.setTimeout("startFade", 5000);
}
function mainLoaded() {
	loaded['main'] = true;
	if (loaded['start'] && loaded['cover'] && loaded['main']) startFade();
}
function startFade() {
	loaded['start'] = false;
	loaded['main'] = false;
	loaded['cover'] = false;
	fade = window.setInterval("fadeIn()", 50);
}
function fadeIn() {
	var obj = document.getElementById("sampleImgFade");
	var opacity = getOpacity(obj);
	if (opacity > 0) {
		setOpacity(obj, opacity-5);
	} else {
		window.clearInterval(fade);
		document.getElementById("sampleImg").src = "images.php?u="+i++;
	}
}
function getOpacity(obj) {
	if (obj.filters) {
		return obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		return obj.style.MozOpacity*100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		return obj.style.KhtmlOpacity;
	} else { // not supported
		return 0;
	}
}
function setOpacity(obj, opacity) {
	if (obj.filters) {
		obj.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity;
	} else if (obj.style.MozOpacity) { // mozilla
		obj.style.MozOpacity = opacity/100;
	} else if (obj.style.KhtmlOpacity) { // konquerer
		obj.style.KhtmlOpacity = opacity;
	}
}

Hi

I am using the css image gallery I got from:
http://www.dynamicdrive.com/style/cs...image-gallery/

I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click.

Is this possible using some javascript?

i'm trying to get this effect
http://css-tricks.com/3458-perfect-f...kground-image/
except, instead of using an image, i would like to use a javascript image gallery. I was playing around with smoothgallery2.0 but I don't really care which I use as long as I'm just displaying images (no text) and there is a smooth fade effect (since the images are pretty high res). thanks so much in advance!

Hi,

I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey.

Please see below:

Code:

<script language="JavaScript" type="text/javascript">
<!-- 
var interval = 1500; 
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}

function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}

//   -->
</script>

However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image.

The buttons look like this:

Code:

<div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>        
        <div id="see-the-whole-project"> see the whole project</div>
        <div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>

Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it.

Thanks
Gary

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

Hello,

My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here.

When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here

Can anybody help me debug this?? I'm going nuts

Thank you

So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this?

The JavaScript:
Code:

//<!--

var imgList = new Array(
	"images/gallery/1.jpg",
	"images/gallery/2.jpg",
	"images/gallery/3.jpg",
	"images/gallery/5.jpg",
	"images/gallery/6.jpg",
	"images/gallery/duo.jpg"
	);

var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);

var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";

function init(){
	all_links=document.getElementById('gallery').getElementsByTagName('a');
	all_links[0].style.color="#7d3d3d";
	ShowMain(current_position);
}

function color_me(element,color){
	element.style.color=color;
}

function Prev(){
	color_me(all_links[current_position],'#000000');
	if((current_position-1)>-1){
		current_position=current_position-1;
	}
	else{
		current_position=(all_links.length-1);
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function direct_selection(number){
	all_links[current_position].style.color="#000000";
	current_position=number;
	ShowMain(current_position);
	all_links[current_position].style.color="#7d3d3d";
}

function Next() {
	color_me(all_links[current_position],'#000000');
	if((current_position+1)<all_links.length){
		current_position++;
	}
	else{
		current_position=0;
	}
	ShowMain(current_position);
//	ShowMainT(current_position);
	color_me(all_links[current_position],'#7d3d3d');
}

function ShowMain(which){
	currentMain = which;
	currentMainT = which;
	if ( currentMain < 0 ) currentMain = 0;
	if ( currentMainT < 0 ) currentMainT = 0;
	if ( currentMain > imgList.length-1) currentMain = imgList.length-1; 
	if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
	document.getElementById('mainImg').src = imgList[currentMain];
	document.getElementById('mainText').innerHTML = clientData[currentMainT];
	var PD = document.getElementById('Pg');
	var PD2 = document.getElementById('Pg2');
	
	document.getElementById("mainText").style.display = 'inline';
//	return false;
}

onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->


//<!--
function preloader(){
	// counter
	var i = 0;

	// create object
	imageObj = new Image();

	// set image list
	images = new Array();
	images[0]="images/gallery/1.jpg";
	images[1]="images/gallery/2.jpg";
	images[2]="images/gallery/3.jpg";
	images[3]="images/gallery/5.jpg";
	images[4]="images/gallery/6.jpg";
	images[5]="images/gallery/duo.jpg";


	// start preloading
	for(i=0; i<=3; i++){
		imageObj.src=images[i];
	}
}
//-->

The HTML where it is displayed:
Code:

<img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" />

hi all,

i wanna do something like http://www.lawebdecanada.com/musica i checked their source but apparently they have protection over it.. or i just dunno how i can take the source. i wanna have a onmouse effect on image so it gives information boxed while rollover it.


does anyone know how i can do this?

thanks a lot.

hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!.
Example of how it works here Link
Code:

<head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;

function myback()
{
t += 786;

with(document.getElementById("contents"))
{
if (t > 0)
t = 0;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}

function myforward()
{
t -= 786;

with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;

if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
  <tr>
    <td rowspan="2">
      <div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
    <td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
  </tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>

Hope this is clear. Thanks.

Hi

I want to build a site that has these two javascript effects. I know HTML, but dont know javscript too well, I know some to be able to change some aspects.

I have found some code online that allws me to change the background image with each click of the links.

the effect I now want to create is the effect that as you clikc on teh link and the new text appears, the old one drops down andthe new one pops up from the bottom into place. and you have a choice of either a big block ont eh right or a small strip on the bottom depending ont he page.

what is this effect called. and does any one know where i might be able to get soem code for it from so i can insert it into my page

I hope all this makes sense

the site is
http://www.peponi-lamu.com

many thanks

Hi, I'm kind of new to javascript and am an undergraduate studying a FdSc in web tech which encompasses all of these kind of languages (PHP, Python, HTML, CSS, Javascript and so on). Javascript is the one that I'm focusing on first and whilst I have a solid understanding of the mark up languages I'm struggling to combine the two. For the simple stuff like like the theory behind variables, functions and so on it's not a problem, but what is a problem is duplicating this kind of effect as seen on www.yidio.com

The feature with the vertical menu that changes when you hover over a TV show name which then changes the content (i.e. the image and text - essentialy the HTML content) is bloody neat in my opinion and I'd like to be able to re-create it.

I've also noticed the same effect is in place on the boxes at www.ebuyer.com and on the story navigation menu at www.sciencedaily.com.

How can I do this? I have all the HTML and CSS source code in place but just no javascript. I've approached my lecturers about it and they've told me about jquery and javascript libraries but this still doesn't help me in being able to achieve this effect. would someone be able to explain and help me?

Thanks

Nick C

Quote:
http://codecanyon.net/item/html-befo...preview/153778
http://codecanyon.net/item/beforeaft...preview/529151
http://www.catchmyfame.com/2009/06/2...eafter-plugin/
I need this effect, I will explain below
The first, we have


if we slide on the left.



when we slide on the right



if we slide to END the result will be:

OR

It's use jquery plugin, I want to find the same things with only javascript, not use jquery.
Because, I'm use it on ipod, iphone, android. It's not allow jquery.
I'm really need it. please, help me.
Thanks for your time

I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it. I've tried multiple scripts and it still seems to be happening

www.alternativeland.com

Does anyone have an idea as to why?