JavaScript - [request] In & Out Fader For Image + Link

Hi everyone,

I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this:
Code:

var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
	
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;	
    return false;
  }
  
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
	fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
		isdrag = true;
		dobj = fobj;
		tx = parseInt(dobj.style.left+0);
		ty = parseInt(dobj.style.top+0);
		x = nn6 ? e.clientX : event.clientX;
		y = nn6 ? e.clientY : event.clientY;
		document.onmousemove=movemouse;

    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

The body has this:
Code:

<img src="images/balloons.gif" class="dragme">

Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page.
I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot.
I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier).

Thanks

Hi guys
I need help on sorting out a drag&drop script
I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost

I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images.
The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like.

I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function


I have the following piece of code in the head section of my page, which is the actual code for dragging the elements
Code:

function Browser() {

var ua, s, i;
var ln = 1;

this.isIE = false;
this.isNS = false;
this.version = null;

ua = navigator.userAgent;

s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}

// Treat any other "Gecko" browser as NS 6.1.

s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}

var browser = new Browser();

// Global object to hold drag information.

var dragObj = new Object();
dragObj.zIndex = 0;

function dragStart(event, id) {

var el;
var x, y;

// If an element id was given, find it. Otherwise use the element being
// clicked on.

if (id)
dragObj.elNode = document.getElementById(id);
else {
if (browser.isIE)
dragObj.elNode = window.event.srcElement;
if (browser.isNS)
dragObj.elNode = event.target;

// If this is a text node, use its parent element.

if (dragObj.elNode.nodeType == 3)
dragObj.elNode = dragObj.elNode.parentNode;
}

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Save starting positions of cursor and element.

dragObj.cursorStartX = x;
dragObj.cursorStartY = y;
dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10);
dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10);

if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0;
if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0;

// Update element's z-index.

dragObj.elNode.style.zIndex = ++dragObj.zIndex;

// Capture mousemove and mouseup events on the page.

if (browser.isIE) {
document.attachEvent("onmousemove", dragGo);
document.attachEvent("onmouseup", dragStop);
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS) {
document.addEventListener("mousemove", dragGo, true);
document.addEventListener("mouseup", dragStop, true);
event.preventDefault();
}
}

function dragGo(event) {

var x, y;

// Get cursor position with respect to the page.

if (browser.isIE) {
x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
}
if (browser.isNS) {
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}

// Move drag element by the same amount the cursor has moved.

dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px";
dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px";

if (browser.isIE) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (browser.isNS)
event.preventDefault();
}

function dragStop(event) {

// Stop capturing mousemove and mouseup events.

if (browser.isIE) {
document.detachEvent("onmousemove", dragGo);
document.detachEvent("onmouseup", dragStop);
}
if (browser.isNS) {
document.removeEventListener("mousemove", dragGo, true);
document.removeEventListener("mouseup", dragStop, true);
}
}

then in the Body, I have the DIV that can be dragged around through the "onmousedown" event
Code:

<div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')">
    <?php 
		print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>'
	?>
  </div>

then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around
Code:

<script> 
		window.onload = function () { 
		
			document.getElementById("milano").onclick = function () {
				alert('AAAAA');
			}
		}
</script>

I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all
Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution...

Cheers,
Mattia

Hello,
I'm new to this forum and well... I'm pretty new to JavaScript as well.
Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great.
Thanks for taking a look!

Code:

<head>
	
	<script>
	function switch1(div) {
	if (document.getElementById('blue')) {
	var option=['blue','green','purple'];
	for(var i=0; i<option.length; i++)
	{ obj=document.getElementById(option[i]);
	obj.style.display=(option[i]==div)? "block" : "none"; }
	}
	}
	//
	function switchImg(i){
	document.images["blue"].src = i;
	}
	</script>
	
	<style>
	#image-switch ul {
	margin:0 0 0 20px;
	color:red;
	list-style-type:none;
	}
	#image-switch li {
	padding:10px;
	}
	#image-switch #green, #image-switch #purple {
	display:none;
	}
	#radiobs {
	width:150px;
	position:relative;
	margin:0;
	}
	#radiobs input {
	margin:0;
	padding:0;
	position:absolute;
	margin-left:6em;
	width:15px;
	}
	
	</style>
	
	
	
	
</head>


<div><img src="blue.jpg" id="blue" /></div>

<ul id="radiobs">
<li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
</ul>

</div>
<div class="clear"></div>

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...


Code:

<script type="text/javascript">
		<!--Hide from incompatible browsers
		/* <![CDATA[ */
				
		function changeText()
		{
			document.getElementById('link').innerHTML = 'View Smaller Image';
			return false;		
		}
		
		function changeImage()
		{			
			var newImage = new Image();
			newImage.src = "images/cottage_large.jpg";
			document.getElementById('thumbnail').src = newImage.src;	
			return false; 											
		}
				
		/**/
		/* ]]> */
		
		// Stop hiding from incompatible browsers -->
	</script>

</head>

<body>
	
	<h3>Real Estate</h3>
		 
	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
    
	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
	

</body>

</html>

I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this?

Code:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/

{ coded = "gUivfkUiz@Vzz38CfC.3ip.Uj"
  key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else {     
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>"+link+"</a>")
}

Hi all,

I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS.

Can someone point me in the right direction as far as documentation?

Thanks a bunch!

I have a php page which uses the following javascript code to open another page (The users profile page) and alos carry over the userID (dUid)

Code:

var userProfileUrl = chatProfileUrl+dUid.replace(/_/gi,"");		

		document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/zoom.png> View Profile</span></br>";

I wanted to add to the menu another image link so I copied the same coding, but I do not know where to place the URL target that I want opened. I know I want the userID (dUid) also to follow this link as well. If I want the coding below to act in the same manner as the coding above, but instead open a page called /gift.php, where do I set the Url?

Code:

document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/gift.png> Send Gift</span></br>";

Hi guys,

As a relative newcomer to Javascript this is killing me! Maybe someone can help...

I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml).

But what I am finding difficult is to make each image link to a different page.

For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page.

The site is he www.uninvitedcritic.com

I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated!

First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image.

Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated.

Thanks!

[CODE]

<a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
if (typeof $.ui == 'undefined'){
document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" />
<script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script>
<script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script>

[CODE]

Here is an extract of my coding

Code:

function displayTitle(name) {
return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>";

I have a map inserted into my aspx page.
When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map

I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear.

How?

Hi,

i want to bring image download link to download a single image using like

<a href="./images/sam.png">Download</a>

when i click the download link it need to download plz help how can i download
can finished

Thanking you

Hi,
I am working with the Cut & Paste JavaScript Slideshow which you can find on http://javascriptkit.com/script/script2/jsslide.shtml .

The images are linked to a page on the Internet (click on image1 to go to "page1", click on image2 to go to "page2", etc.) which is a nice feature! However, the link opens in a new window. Could anyone tell me what I have to do to 'force' the link to open in the same window (target="_self")?

Thank you for your help! I really appreciate it.
WWWolf - Belgium

Hi there,

I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.

I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated.

In the <head> section i have this:

<script type="text/javascript">

img1 = new Image();
img1.src = "images/party/party.jpg";

img2 = new Image();
img2.src = "images/party/icecream.jpg";

img3 = new Image();
img3.src = "images/party/juice.jpg";


img4 = new Image();
img4.src = "images/party/videogames.jpg";

function change(num){

document.images["linkpic"].src = "img" + num
}

</script>

</head>

In the <body> i have:

That's my default image
<table>
<tr>
<td width="100">
<img src="images/party/balloon1.jpg" name="linkpic">
</td>
<td width="260" valign="top" align="left">
<table>
<tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr>
<tr><td><a href="Party2.html" onmouseover="change('2')">Icecream
</a></td></tr>
<tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr>
<tr><td><a href="Party4.html" onmouseover="change('4')">Video Games
</a></td></tr>
</table>
</tr>
</table>
</body>

I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
Any hints and help are appreciated!

Thanks!

So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret.

It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link.

I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions?

I'd like to create a website similar to http://www.picfog.com which displays images posted to Twitpic and Yfrog via Twitter.

Could anyone help me with the following:

Given a feed/list of messages containing links to images, display the images that are linked to.

For example, take these two Twitter messages:

omgsage: http://twitpic.com/cw3i3 - This is the cutest kitty ever
ellievolia: Our evening! http://twitpic.com/cw3hx

Using Javascript how do I extract the link part of each message, convert this to point to the actual thumbnail and then display the thumbnails on the web page?


Thanks in advance!