...

View Full Version : Image Tricks Using Javascript?



MichaelBowler
06-25-2004, 07:19 PM
Heres a section where I want people to post Scripts to perform tricks with images. It would be quite useful for most people I reckon. So will anyone please post your image tricks scripts an its descrition?

Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?

Thanks to anyone that participates in this thread. :thumbsup:

Willy Duitt
06-25-2004, 09:05 PM
Here, needs work but you can play with this:


<BASE HREF="http://www.andrewgray.com/">
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>


<script type="text/javascript">
<!--//
var count = 0;
function creatImage(option){
var element = document.body;
var newImage = document.createElement('img');
newImage.src = option.value;
newImage.style.zIndex = 10;
newImage.className = "drag";
newImage.ondblclick = Zoom;
newImage.oncontextmenu = unZoom;
element.appendChild(newImage);
}

function Zoom(){
this.style.setAttribute('zoom','150%');
}

function unZoom(){
this.style.setAttribute('zoom','');
return false;
}


/*
Drag and Drop Script-
Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
var index = 0;
var dragapproved=false;
var z,x,y;
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x;
z.style.pixelTop=temp2+event.clientY-y;
return false;
}
}
function drags(){
if (!document.all)
return;

else if(event.srcElement.className=="drag"){
dragapproved=true;
z=event.srcElement;
temp1=z.style.pixelLeft;
temp2=z.style.pixelTop;

index=index+1;
z.style.zIndex=eval(z.style.zIndex+index);
status=z.style.zIndex; // FOR Z-INDEX TESTING ONLY //;

x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
}
document.onmousedown=drags;
document.onmouseup=new Function;
//-->
</script>
</HEAD>

<BODY>
<div><P>Create an image:
<form>
<select onchange="creatImage(this)">
<option>Choose A Picture</opton>
<option value="monkey.gif">Monkey</option>
<option value="travel.gif">Palm Trees</option>
<option value="essays.gif">Quill & Paper</option>
<option value="computer.gif">Computer & Modem</option>

</select>
</form></div>

Vladdy
06-25-2004, 09:19 PM
www.vladdy.net/Demos/CropImage.html
www.vladdy.net/Demos/panview.html
www.vladdy.net/Demos/imageadjustments.html

starrwriter
06-26-2004, 02:08 AM
www.vladdy.net/Demos/CropImage.html
www.vladdy.net/Demos/panview.html
www.vladdy.net/Demos/imageadjustments.html

You guys have WAY too much free time on your hands. And, apparently, so do I because I enjoyed playing with these image gizmos.

shlagish
06-26-2004, 02:55 AM
Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?
Here's how I would do it.
make an image with an id and an onclick command:
<img src="wtv.gif" id="theTrick" onclick="perform()" />

then in the script:
function perform(){

//get that image
var image=document.getElementById("theTrick");
//establish the two images I want to have available on click
var imageOne="wtv.gif";
var imageTwo="asd.gif";
//see which image is there right now and set the src attribute of "theTrick" to the other image
if(image.getAttribute("src")==imageOne){
image.setAttribute("src",imageTwo);
} else {
image.setAttribute("src",imageOne);
}
//There you go
}

Of course once you've got that down, you can make changes to the script to make it accomodate any number of images, make it work with many images on one same page, etc..
But that will be a little longer, I'll go do that and I'll post again once it's done.
Until then, I hope what I gave you is enough to get you started :)

shlagish
06-26-2004, 03:37 AM
Here is what I ended up with.
Have a try yourself and show us what you come up with :)


<html>
<head>
<script type="text/javascript">
<!--
function perform(theImg){

var listImgs=["swirl.gif","xout2.gif","maxamize2.gif"], i;

for(i=0;i<listImgs.length;++i){
if(theImg.getAttribute("src")==listImgs[i]){
if(i==listImgs.length-1){
i=-1;
}
theImg.setAttribute("src",listImgs[i+1]);
end();
}
}
}
//-->
</script>
</head>
<body>
<img src="swirl.gif" onclick="perform(this)" />
<img src="maxamize2.gif" onclick="perform(this)" />

</body>
</html>

MichaelBowler
06-27-2004, 07:58 PM
Thanks you lot. I'm currently testing the scripts and changing them to my needs.

Although these scripts are great I was thinking of a script where the images used can be defined in the image tag something like <img src=image.gif onclick=switchTo('image2.gif, image.gif')> the reason I have included the image in the tag twice is simply because if the image has been clicked the image will be at 'image2.gif' and when the image is clicked again it needs something to switch back to which is 'image.gif'.

I reckon that should be the answer with most image swich scripts because firstly you'd be able to put the script in a js file e.g. 'script.js' so you can link any html asp etc.. file to it and the second reason is that the images aren't defined in the script so the script stays small and easy to use.

So if anyone, anywhere can come up with an answer will you please post it on this thread?

:thumbsup:

SpiritualStorms
06-27-2004, 10:33 PM
For what it's worth:


function imageFlips(paramOne,paramTwo)
{
if(document.images)
{
document.images[paramOne].src=paramTwo;
}
else
{
alert("There's no image by the name of " + paramOne);
}
}

And to make a call to it, you do something like this,



<br>
<a href="javascript:void(0);" onmouseover="imageFlips('flower','triangle.bmp');"
onmouseout="imageFlips('flower','flower.bmp');">
<img id="flower" src="flower.bmp">
</a>
<br>

glenngv
06-28-2004, 11:13 AM
Heres a section where I want people to post Scripts to perform tricks with images. It would be quite useful for most people I reckon. So will anyone please post your image tricks scripts an its descrition?

Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?

Thanks to anyone that participates in this thread. :thumbsup:
At first, I thought you were talking of image tricks like this: :D


function logAccess(url){
var accessLinkCounter = new Image();
accessLinkCounter.src = "counter.asp?link=" + escape(url);
}
...
<a href="page1.htm" onclick="logAccess(this.href)">page 1</a>
<a href="page2.htm" onclick="logAccess(this.href)">page 2</a>

That image trick sends request on the server without refreshing the page. That is usually used to access server-side codes that doesn't need some output back on the client.

Other use of the image trick is "preloading" non-image files while a "Loading..." message is shown. It is demonstrated in the "Popup DocViewer" link in my sig.

trib4lmaniac
06-28-2004, 11:35 AM
You could give two imgs id's then switch them dynamically like
<img src="foo.gif" id="foo" onClick="switchWith('bar')">
<img src="bar.gif" id="bar" onClick="switchWith('foo')">Shouldn't be too hard to implement.

trib4lmaniac
06-28-2004, 11:43 AM
function switchWith(it, id)
{
var buffer=it.src
it.src=document.getElementById(id).src;
document.getElementById(id).src=buffer;
}
Viola, call it as
<img src="images/mq_logo_top.gif" id="foo" onClick="switchWith(this, 'bar')">
<img src="images/mq_logo_top_class.gif" id="bar" onClick="switchWith(this, 'foo')">

MichaelBowler
06-28-2004, 03:37 PM
I forgot to mention I use Internet Explorer 6.02600.0000.xpclient.010817-1148 :)

MichaelBowler
06-28-2004, 04:24 PM
Just searched the net and found a script that I modified a little and came out with this
---------------
<html><head><script type="text/javascript">

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
elseif
{
{
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script></head><body>
<br>

<img src="user_offline.gif" hsrc="printer.gif">
</a>
<br>
</body></html>
----------------------
trouble is it isn't working can someone tell me whats wrong please? :thumbsup:

Garadon
06-28-2004, 05:00 PM
Now this thread been here for some day so I am just curious are there actually a request for help in it, cause as I read it its more a post a script thread?

MichaelBowler
06-28-2004, 06:19 PM
I did intend it to help people with image trick scripts. But I also wanted people to post Scripts as well.

MichaelBowler
06-28-2004, 09:34 PM
So is anyone able to help me with the JavaScript I posted before or should I look elsewhere for the answer to my problem? :thumbsup:

Willy Duitt
06-28-2004, 10:35 PM
So is anyone able to help me with the JavaScript I posted before or should I look elsewhere for the answer to my problem? :thumbsup:

1) You could try to be patient or at the least polite.
2) I suppose you could if you can not be either of the above....

SpiritualStorms
06-29-2004, 06:47 AM
People are doing what you wanted them to. Here's your original post:


Heres a section where I want people to post Scripts to perform tricks with images. It would be quite useful for most people I reckon. So will anyone please post your image tricks scripts an its descrition?

Their is one type of image trick I am trying to get my head around it involves clicking an image so it changes to another one an sticks that way until when you click it again it changes back. So will someone please post a script that will do this?


Your key words, are image tricks scripts. That's exactly what many have done.

As for the second, well, that i will presume will require the settimerinterval thingy, or a date object, for the recording of when it was first hit, and then maybe another function for the second click.

MichaelBowler
06-29-2004, 03:10 PM
OK sorry if I was impolite and impatient everyone :)

And I agree people are doing what I originaly asked of them so thank you everyone for that :)

And please please will someone help me with the script I posted? :D

And when I get the code I want I will post it on this thread so everyone can use it :)

jamescover
06-29-2004, 03:34 PM
Short & Sweet:


<a href="javascript:void(0);"><img src="image1.gif" width="25" height="25" onmouseover="this.src='image2.gif'" onmouseout="this.src='image1.gif'" border=0></a>



Oops!!! I re-read your first post--you wanted onClick handers...sorry.

-james

Willy Duitt
06-29-2004, 04:33 PM
Two things:

Firstly; If you use a Mozilla Based Browser you can use the Javascript Console to find the javascript errors. Or even using IE with script debugging turned on, you can find the errors although it takes more experience to interpret the errors and the error is generally found on the next line rather than the one the alert points to.

Secondly; If you learn to properly indent your code, it is much easier to spot missing brackets, which in this case was your underlying problem. However, I cleaned the code up a little and added a cursor pointer so that a user would know the image is clickable when mouseovered.

Oh; and please use
...CODE HERE... tags when posting code.....


<html>
<head>
<script type="text/javascript">
<!--//
function init() {
if (!document.getElementById){ return };
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
}
}
} window.onload = init;
//-->
</script>
</head>
<body>
<img src="user_offline.gif" hsrc="printer.gif">
<img src="user_offline.gif">
</body>
</html>


.....Willy

MichaelBowler
06-29-2004, 04:45 PM
Thank you Willy that has worked, I will see if I can make it change back when clicked again :D

MichaelBowler
06-29-2004, 05:28 PM
I had a try at making it change back but to no avail so please will someone give me further help? heres the code for anyone that wants to try



<html>
<head>
<script type="text/javascript">
<!--//
function init() {
if (!document.getElementById){ return };
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
}
}
} window.onload = init;
//-->
</script>
</head>
<body>
<img src="user_offline.gif" hsrc="printer.gif">
<img src="user_offline.gif">
</body>
</html>


Thanks to anyone and everyone who has helped and might help! :D

trib4lmaniac
06-29-2004, 06:07 PM
Change this bit...
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}to...
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
backup=this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
this.setAttribute('hsrc',backup)
}

MichaelBowler
06-29-2004, 06:11 PM
Thank you so much :D :thumbsup:

And the answer was staring me in the face aswell. :D

MichaelBowler
06-29-2004, 07:55 PM
I said I would post the code that I was looking when I got it so here you go...
<!--//
function init() {
if (!document.getElementById){ return };
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('nsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('nsrc');
imgarr[i].style.cursor = 'pointer';
imgarr[i].onclick = function() {
imgOriginSrc = this.getAttribute('src');
bp = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('nsrc'))
this.setAttribute('nsrc',bp)
}
}
}
}
window.onload = init;
//-->
And to apply it to the images simply do like the below...
<img src="start_image.gif" nsrc="new_image.gif">
:D :D :D :D :D

jamescover
06-30-2004, 04:05 AM
Here's my answer:


<script>
<!--
myImg = new Array("Image1.gif","Image2.gif")
imgNum=0;
imgCt=myImg.length;
function swapImg(){
if(document.images){
if(document.swap.complete){
imgNum++;
if(imgNum==imgCt){
imgNum=0;
}
}
}
document.swap.src=myImg[imgNum];
}
//-->
</script>




<a href="#" onClick="javascript:swapImg();"><img name="swap" src="Image1.gif" width="150" height="150" border=0></a>


Tested in NN4.06, and IE 5.0...everything else ought to be a breeze.


-james

MichaelBowler
06-30-2004, 01:23 PM
Here's my answer:


<script>
<!--
myImg = new Array("Image1.gif","Image2.gif")
imgNum=0;
imgCt=myImg.length;
function swapImg(){
if(document.images){
if(document.swap.complete){
imgNum++;
if(imgNum==imgCt){
imgNum=0;
}
}
}
document.swap.src=myImg[imgNum];
}
//-->
</script>




<a href="#" onClick="javascript:swapImg();"><img name="swap" src="Image1.gif" width="150" height="150" border=0></a>


Tested in NN4.06, and IE 5.0...everything else ought to be a breeze.


-james
Does that do the same as the script I last posted?. Apart from the fact that your script sends the user to the top of the page. :thumbsup:

M1k3-+i3
06-30-2004, 05:50 PM
I have tried to rate this thread but I can't so I'm gonna post the rating here

I rate this thread 5/5

jamescover
07-01-2004, 12:37 AM
Apart from the fact that your script sends the user to the top of the page.


I did that (href="#") because NN4.06 wouldn't work with href="javascript:void(0);".

Anyway, you can just remove the onClick altogether, and it will work all around too, without sending the user to the top of the page.

Like this:

<a href="javascript:swapImg();" onFocus="javascript:this.blur();"><img name="swap" src="images/Image1.gif" width="100" height="100" border=0></a>



See it here::

http://www.ekigroup.com/javascript/swapImg.html



-james

glenngv
07-01-2004, 06:02 AM
Apart from the fact that your script sends the user to the top of the page.


I did that (href="#") because NN4.06 wouldn't work with href="javascript:void(0);".

Anyway, you can just remove the onClick altogether, and it will work all around too, without sending the user to the top of the page.

Like this:

<a href="javascript:swapImg();" onFocus="javascript:this.blur();"><img name="swap" src="images/Image1.gif" width="100" height="100" border=0></a>



See it here::

http://www.ekigroup.com/javascript/swapImg.html



-james
You can still use href="#" and the page will not go to the top if you return false to the onclick handler.

<a href="#" onclick="swapImg();return false">

or simply:

<a href="#" onclick="return swapImg()">

and then putting return false at the end of the swapImg() function.

jamescover
07-01-2004, 06:54 AM
You can still use href="#" and the page will not go to the top if you return false to the onclick handler.


Well, yeah, sure...assuming I knew what I was doing...ha ha.


:D


-james

M1k3-+i3
07-01-2004, 06:26 PM
Nice collection of scripts building up here :thumbsup:

MichaelBowler
07-02-2004, 05:17 PM
I agree with the below:
Nice collection of scripts building up here :thumbsup:And hopefuly the collection will continue to build :D

Mr J
07-03-2004, 01:33 PM
And hopefuly the collection will continue to build

But this is supposed to be a help section not post a script :confused:

MichaelBowler
07-03-2004, 03:12 PM
Read the entire thread please :D :thumbsup:

SpiritualStorms
07-04-2004, 02:55 AM
I agree with Mr. J. I think that excessive posting of scripts defeats the main aim of the forums. This forum is intended for learning, not from copying, and pasting, codes.

Willy Duitt
07-04-2004, 03:30 AM
I agree with Mr. J. I think that excessive posting of scripts defeats the main aim of the forums. This forum is intended for learning, not from copying, and pasting, codes.

Hmmmm;

And there was nothing within this thread for you to learn from?

.....Willy :rolleyes:

SpiritualStorms
07-04-2004, 04:44 AM
Not really.

shlagish
07-04-2004, 05:11 AM
It your goal is to learn, you can look at these codes and see how they work, why they work, and use some of the techniques in future scripts of your own. That's what I call learning...

SpiritualStorms
07-04-2004, 05:14 AM
If we all knew how to break a clock apart, and reassemble it, then why have teachers?

shlagish
07-04-2004, 07:26 AM
Teach you HOW to break and reassemble it..

Willy Duitt
07-04-2004, 08:14 AM
It your goal is to learn, you can look at these codes and see how they work, why they work, and use some of the techniques in future scripts of your own. That's what I call learning...

Good point! :thumbsup:

Or, you can learn from the different coding techniques each person brings to the table....

Or, you can take a script and try to improve upon it.....

Or, you can take a routine from a script and build it into something else....

Perhaps something like this which is an extension of a code above....



<html>
<head>
<script type="text/javascript">
<!--//
function loadMenu(){ if(!document.getElementById){ return };
var image = document.getElementsByTagName('img');
for(var i=0; i<image.length; i++){
if(image[i].getAttribute('className') == 'linkl'){
for(var j=1; j<=3; j++){
var preLoad = new Array();
preLoad[j] = new Image();
preLoad[j].src = image[i].src.replace(/\d+/g,j);
document.getElementById('test').innerHTML += '<br>'+preLoad[j].src; // FOR TESTING PURPOSES ONLY, PLEASE REMOVE //;
}

image[i].onmouseout = function(){
if(this.getAttribute('name') == ''){
this.setAttribute('src',this.src.replace(/\d+/g,1));
status = 'Source= '+this.src+' Name= '+this.name;return true; // FOR TESTING PURPOSES ONLY, PLEASE REMOVE //;
}
}

image[i].onmouseover = function(){
if(this.getAttribute('name') == ''){
this.setAttribute('src',this.src.replace(/\d+/g,2));
status = 'Source= '+this.src+' Name= '+this.name;return true; // FOR TESTING PURPOSES ONLY, PLEASE REMOVE //;
}
}

image[i].onclick = function(){
for(var k=0; k<image.length; k++){
if(image[k].getAttribute('name') == 'active'){
image[k].setAttribute('name','');
}
}
this.setAttribute('src',this.src.replace(/\d+/g,3));
this.setAttribute('name','active')
alert('Source= '+this.src+' Name= '+this.name);return false; // FOR TESTING PURPOSES ONLY, PLEASE REMOVE //;
}
}
}
} window.onload = loadMenu;
//-->
</script>
</head>
<body>

<div id="test">TESTING PRELOAD IMAGES:</div>


<div class="navbarl">
<ul class="navlistl">
<li><a href="home.html"><img class="linkl" src="../images/home3.gif" name="active"></a>
<li><a href="rosters.html"><img class="linkl" src="../images/rosters1.gif"></a>
<li><a href="rules.html"><img class="linkl" src="../images/rules1.gif"></a>
<li><a href="contact.html"><img class="linkl" src="../images/contact1.gif"></a>
<li><a href="draft.html"><img class="linkl" src="../images/draft1.gif"></a>
<li><a href="trades.html"><img class="linkl" src="../images/trades1.gif"></a>
</ul>
</div>


.....Willy

SpiritualStorms
07-04-2004, 10:29 AM
If i could break things apart myself, i dont really think i would need a Teacher.


Teach you HOW to break and reassemble it..


Why have a teacher do that for me if i know how to do it? Generally speaking, a teacher is to help others who can not break things apart for themselves, hence, the need for an instructor to teach you what you do not know.

M1k3-+i3
07-05-2004, 02:29 PM
OK what about if people post scripts that are just being started, then people can join in and help to build the rest of the script hence learning things along the way. :)

Willy Duitt
07-05-2004, 02:35 PM
OK what about if people post scripts that are just being started, then people can join in and help to build the rest of the script hence learning things along the way. :)

I would advise starting your own thread since many people will ignore a thread that appears to have been answered long ago....

M1k3-+i3
07-05-2004, 03:25 PM
Ok I agree. will start my own thread at some point.
Shall we say its time for this thread to close? :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum