Go Back   Novahq.net Forum > Computers > Web design and Programming

Web design and Programming Discuss website creation and other programming topics.

Reply
 
Thread Tools Search this Thread Display Modes
  #1  
Old 01-22-2006, 07:29 PM
Webviper2006 is offline Webviper2006
Registered User

Join Date: Nov 2005
Posts: 495

Picture Change

Hi I need a JavaScipt code that must work! This is the following.

When someone see the image when mouse is over it, the image changes. When not changes back to an orginal.

Please Thanks!
__________________
Sorry bums, now I'm back! Now I know C++! I use Microsoft Visual C++!
Reply With Quote
  #2  
Old 01-22-2006, 07:32 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

I'm pretty sure you can do this with CSS using back ground images. I'll read more on it, and hopefuly later I can display a lil code snippet for you to use. JS will mean less can see the rollover. (not a lot less, but still less.)
Reply With Quote
  #3  
Old 01-22-2006, 07:41 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

Okay, seeings how I assume this is a image link let's get down to buisness

the CSS code:
Code:
a {
  background: url("http://image.com/image/image.jpg");
  /*then the rest of course*/
} 
a:hover {
  background: url("http://image.com/image/otherimage.jpg");
}
Then of course

Code:
<a href="index.php">Home</a>
Now this is untested, and can't be used in certain cases. But this can easily be modified to work to your needs This is meant to get you on a start. For more indepth look at all this I'd recommend www.w3schools.com
Reply With Quote
  #4  
Old 01-22-2006, 09:24 PM
Webviper2006 is offline Webviper2006
Registered User

Join Date: Nov 2005
Posts: 495

I think CSS is bad. So I want it to be actionscipt.
__________________
Sorry bums, now I'm back! Now I know C++! I use Microsoft Visual C++!
Reply With Quote
  #5  
Old 01-22-2006, 09:37 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

Not meaning to be rude in any way, but why on earth do you think CSS is bad? Do you mean for this particular situation?
Reply With Quote
  #6  
Old 01-22-2006, 09:47 PM
Webviper2006 is offline Webviper2006
Registered User

Join Date: Nov 2005
Posts: 495

No no, I like CSS. I use it only for text effects. Nevermind I wrote my own code. Thanks anyway!
__________________
Sorry bums, now I'm back! Now I know C++! I use Microsoft Visual C++!
Reply With Quote
  #7  
Old 01-22-2006, 09:48 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

I was about to try to dig up a JS code snippet for ya, but you wrote your own code. gj.
Reply With Quote
  #8  
Old 01-23-2006, 02:46 PM
Jeff is offline Jeff
Registered User

Join Date: Jun 2005
Posts: 1,602

Send a message via AIM to Jeff
I use the following code which requires no preloading and works like a charm.
For future reference this is the javascript you need:

1) Put this in the head
Code:
<script language="JavaScript" type="text/javascript" src="PATH/FILENAME.js"></script>
2) Change the image paths below to your liking and then paste it in notepad and save as .JS
(Make sure you set the filename in the first code)

Code:
if (document.images) { 
image1on = new Image(); 
image1on.src = "images/page1-over.gif"; 
image1off = new Image(); 
image1off.src = "images/page1.gif";  

image2on = new Image(); 
image2on.src = "images/page2-over.gif"; 
image2off = new Image(); 
image2off.src = "images/page2.gif";

}  
function changeimages() { 
if (document.images) { 
for (var i=0; i<changeimages.arguments.length; i+=2) { 
document[changeimages.arguments[i]].src = eval(changeimages.arguments[i+1] + ".src"); 
} 
} 
}
3) Now put the following code infront of the image you want to change:
Code:
<a href="index.php" target="_parent" onmouseover="changeimages('image2', 'image2on')" onmouseout="changeimages('image2', 'image2off')">
Now insert the following code inside the image tag (the one that will be changing):
Code:
name="image1"
4) Repeat step 3 for each image, changing the numbers each time. Make sure each image is in the .js aswell.

There you go
__________________
Exit 13 - Web design and development.
My Blog - Read up on what i'm up to.
Reply With Quote
  #9  
Old 01-23-2006, 03:18 PM
Webviper2006 is offline Webviper2006
Registered User

Join Date: Nov 2005
Posts: 495

Oh mines much shorter!
__________________
Sorry bums, now I'm back! Now I know C++! I use Microsoft Visual C++!
Reply With Quote
  #10  
Old 01-23-2006, 03:30 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

Did you write it, or someone else? (@ webviper)
Reply With Quote
  #11  
Old 01-23-2006, 06:28 PM
Jeff is offline Jeff
Registered User

Join Date: Jun 2005
Posts: 1,602

Send a message via AIM to Jeff
Well, yours may be shorter but i guarentee mine looks neater within the code .
__________________
Exit 13 - Web design and development.
My Blog - Read up on what i'm up to.
Reply With Quote
  #12  
Old 01-23-2006, 07:21 PM
JonM is offline JonM
Registered User

Join Date: Jun 2004
Posts: 2,156

Quote:
Originally posted by Jeff
Well, yours may be shorter but i guarentee mine looks neater within the code .
Neatness is top priority, I'd use Jeffs. Besides, a few lines for whatever you are doing probaly won't make a diff.
Reply With Quote
  #13  
Old 01-23-2006, 07:42 PM
Webviper2006 is offline Webviper2006
Registered User

Join Date: Nov 2005
Posts: 495

Quote:
Originally posted by -Elite-
Did you write it, or someone else? (@ webviper)
I wrote it here it is

Code:
<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].onmouseover = function() {
            imgOriginSrc = this.getAttribute('src');
						var imagetest=new Image()
						imagetest.src=this.getAttribute('hsrc')
						if (imagetest.complete)
            this.setAttribute('src',this.getAttribute('hsrc'))
        }
        imgarr[i].onmouseout = function() {
						var imagetest=new Image()
						imagetest.src=imgOriginSrc
						if (imagetest.complete)
            this.setAttribute('src',imgOriginSrc)
        }
    }
  }
}
onload=init;

</script>
And then when I make an image...

<img src="images/menu_buttons/forums_0.gif" width="170" height="19" border="0" hsrc="images/menu_buttons/forums_1.gif">
__________________
Sorry bums, now I'm back! Now I know C++! I use Microsoft Visual C++!
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Picture: This Is Me! Chrispy General Chat 27 08-04-2006 01:04 AM
Picture of Yourself Chrispy General Chat 1 07-27-2006 01:54 AM
picture Steve Humor & Jokes 7 08-01-2005 09:11 PM
Hi do you put a picture under your name Delta force man General Chat 6 08-01-2003 10:20 PM
FUNNY PICTURE asadznet Humor & Jokes 5 07-28-2003 05:51 AM


All times are GMT -5. The time now is 01:47 PM.




Powered by vBulletin®