Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



SEO Class in Chicago, IL

Learn How To Optimize Your Website on July 26, 2013


Looking for personalized in-depth SEO training among your peers?



High Rankings is offering a 1-day customized SEO training class in Chicago. Class size is limited so please sign-up now if you want in!



 


Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!


More SEO Content

International SEM  | Social Media  |  Search Friendly Design |  SEO |   Paid Search / PPC  |  Seminars  |  Forum Threads  |  Q&A |  Copywriting |  Keyword Research   |  Web Analytics / Conversions  |  Blogging  |  Dynamic Sites  | Linking  |   SEO Services  |  Site Architecture  | Search Engine Spam  | Wrap-ups  | Business Issues |  HRA Questions  |  Online Courses

Photo
- - - - -

How Do I Use Css Swap Image In Another Position

Started by Directory_SEO , Mar 12 2006 10:59 PM

  • Please log in to reply
18 replies to this topic

#16 Directory_SEO

Directory_SEO

    HR 4

  • Active Members
  • PipPipPipPip
  • 126 posts

Posted 15 March 2006 - 03:18 AM

QUOTE(maleman @ Mar 14 2006, 06:10 PM)
That's why I posted the script. The short answer here is Use JavaScript and CSS on the same button. Then take a break and have some fun.

It's another one of them CSS vs. "one-thing-or-another" threads. LOL!
View Post


thanks guys, emm...do wish CSS get more powerful

#17 lyn

lyn

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 940 posts
  • Location:London, Ontario

Posted 15 March 2006 - 05:57 PM

If you're looking for a script to do the hide/reveal thing for you, there's one called a Switch Content script at Dynamic Drive (www.dynamicdrive.com) that I tried out a while back and found it works very well, very easily with a good range of display options. You would still use CSS for your rollovers and, if javascript is disabled, it lets all your undisplayed content show on the page.

L.

#18 DaDon

DaDon

    HR 1

  • Members
  • Pip
  • 1 posts

Posted 31 July 2008 - 09:50 AM

Thanks for this piece of code which solved a similar problem I had. My only question is this: after I apply the code as instructed and hover over an image (the onMouseOver bit) it does not return to the original image after I move the mouse off or away from that image.

What command/attribute do I need to use to perform the return to normal state function?

Thanks in advance.

DaDon


QUOTE(maleman @ Mar 13 2006, 06:21 AM) View Post
Looks like you to need to use a little scripting to do that. It goes somethin like this:

Try putting an onMouseOver in your FAQ link.

CODE
<head>
&lt;script>
<!--
function bip() {
 document.images.pic.src = "someOtherURL";
 }
//-->
</script>
</head>

<body>
<!--hovering over a link-->
<a href="#" onMouseOver="bip()">The Link</a>

<!--hovering over a pic-->
<img src="someURL" onMouseOver="bip()">

<!--This is the pic that will swap-->
<img src="someURL" name="pic">
</body>

goodjob.gif

#19 scouseflip

scouseflip

    HR 4

  • Active Members
  • PipPipPipPip
  • 201 posts
  • Location:North West, England

Posted 31 July 2008 - 11:27 AM

CODE
<head>
&lt;script>
<!--
function bip() {
document.images.pic.src = "someOtherURL";
}

function restore() {
document.images.pic.src = "origionalURL";
}

//-->
</script>
</head>

<body>
<!--hovering over a link-->
<a href="#" onMouseOver="bip()" onMouseOut="restore()">The Link</a>

<!--hovering over a pic-->
<img src="someURL" onMouseOver="bip()" onMouseOut="restore()">

<!--This is the pic that will swap-->
<img src="someURL" name="pic">
</body>


I don't do js really but is that any good?
Back to CSS/XHTML Discussion and Questions


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. HRF SEO Forum
  2. → Search Engine Optimization
  3. → Search Engine Friendly Design & Usability
  4. → CSS/XHTML Discussion and Questions
  5. *READ FIRST*--> Forum Rules