Shoutbox

HTML Code for image mouseover? - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: HTML Code for image mouseover? (/showthread.php?tid=46776)
HTML Code for image mouseover? by albert on 06-24-2005 at 04:25 PM

ye well I have like an image I want to change when someone has their mouse on it.. and then go back to the first when they move the cursor..  I can't seem to find that code on google.. :S I was wondering if any of you knew it..

thx in advance

RE: HTML Code for image mouseover? by absorbation on 06-24-2005 at 04:27 PM

http://www.wandforge.com/rollover/ i found that :P

RE: HTML Code for image mouseover? by albert on 06-24-2005 at 04:29 PM

quote:
Originally posted by Absorbation
http://www.wandforge.com/rollover/ i found that :P

nah that seems to be a sync code.. ( looks cool though, bookmarking the page for future references ;-) )

But nah, it aint it :( thx for the try
RE: HTML Code for image mouseover? by absorbation on 06-24-2005 at 04:32 PM

http://www.searchbliss.com/webmaster_tools/rollover.htm here is another thing i found to make things if your lasy :P

or this http://www.designplace.org/scripts.php?page=1&c_id=21

RE: HTML Code for image mouseover? by Eljay on 06-24-2005 at 04:41 PM

JAVASCRIPT IS EVIL!!!!111 (6)

http://www.domedia.org/oveklykken/css-rollover-image.php is what i would use tbh :P

RE: HTML Code for image mouseover? by albert on 06-24-2005 at 04:45 PM

quote:
Originally posted by Stigmata
oh my :google:


gtmf...

quote:
Originally posted by lp15
I can't seem to find that code on google.. :S.



quote:
Originally posted by Lee Jeffery
JAVASCRIPT IS EVIL!!!!111 (6)

http://www.domedia.org/oveklykken/css-rollover-image.php is what i would use tbh :P
quote:
Originally posted by Absorbation
http://www.searchbliss.com/webmaster_tools/rollover.htm here is another thing i found to make things if your lasy :P

or this http://www.designplace.org/scripts.php?page=1&c_id=21

Im not getting how to use any of these :$


quote:
Originally posted by Lee Jeffery
JAVASCRIPT IS EVIL!!!!111 (6)

http://www.domedia.org/oveklykken/css-rollover-image.php is what i would use tbh :P

I don't need this.. my image already has the text on it.. I just want it to change to another iage when the cursor is on..
RE: HTML Code for image mouseover? by RaceProUK on 06-24-2005 at 04:55 PM

Then use the onMouseOver and onMouseOut attributes to trigger a quick JS block that switches the images.
Or take the CSS approach linked to, and put your text in as text instead.

RE: HTML Code for image mouseover? by albert on 06-24-2005 at 05:14 PM

quote:
Originally posted by raceprouk
Then use the onMouseOver and onMouseOut attributes to trigger a quick JS block that switches the images.
Or take the CSS approach linked to, and put your text in as text instead.

:S I didnt get half of these words in that pst :$

what's a JS block.. ?

Btw im guess that CSS is a coding language.. and i rlly dunno it :(
RE: HTML Code for image mouseover? by absorbation on 06-24-2005 at 05:18 PM

quote:
Originally posted by lp15
what's a JS block

js = javascript

css = castaing style sheet (easy)

i'll do the coding for you if you like ;)
RE: HTML Code for image mouseover? by albert on 06-24-2005 at 05:26 PM

quote:
Originally posted by Absorbation

i'll do the coding for you if you like ;)

PM atm :) thx
RE: HTML Code for image mouseover? by Rik on 06-24-2005 at 05:42 PM

on the head:

code:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Now put this code where do you want the image to appear
don't forget to edit
code:
<body onLoad="MM_preloadImages('rollover%20image')">
<a href="url when clicked" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','rollover%20image',1)"><img name="Image1" border="0" src="original image"></a>
RE: HTML Code for image mouseover? by albert on 06-24-2005 at 05:56 PM

quote:
Originally posted by Cool Rik
on the head:
code:
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Now put this code where do you want the image to appear
don't forget to edit
code:
<body onLoad="MM_preloadImages('rollover%20image')">
<a href="url when clicked" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','rollover%20image',1)"><img name="Image1" border="0" src="original image"></a>

:| damn.. oki *-) well absobation is taking care of it for me.. but thx anyways man, appreciate it ;-)
RE: HTML Code for image mouseover? by absorbation on 06-24-2005 at 06:00 PM

Yeh here it is

<script language="JavaScript">
//Preload knight Images
knighted=new Image(32,48)
knighted.src="http://www.ctech.ca/lp15/creations/images/gif/11a.gif"
knightred=new Image(32,48)
knightred.src="http://www.ctech.ca/lp15/creations/images/gif/11ab.gif"
</script>

<!-- create mouse-over effect -->

<a href="http://www.ctech.ca/lp15/creations/home.htm" onMouseOver="document.knight.src=knightred.src" onMouseOut="document.knight.src=knighted.src">

<img name="knight" src="http://images/" border="0"></a>

I'm not sure about the links to it you will have to give it to me ;)