Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS rollover with different size images 1

Status
Not open for further replies.
ChrisRChamberlain

ChrisRChamberlain

Programmer
Mar 23, 2000
3,392
GB
Hi all

Not sure whether this is practical - for reasons various, need to use inline CSS calls but would like to create an image rollover utilising a thumbnail image.

The second image subsequently displayed would be a different full size image in the same left/top position as the thumbnail image.

Any suggestions, please?

TIA

FAQ184-2483​
Chris [pc2]
PDFcommander.com
motrac.co.uk
 
Sort by date Sort by votes
You should be able to do this, although to avoid IE 6 pitfalls, the container would need to be an anchor or descendant of an anchor (otherwise :hover fails). Something like this, perhaps?

Code: 
#myRollover {
   background: url(someImage.gif) no-repeat;
   width: 100px;
   height: 100px;
   display: block;
}

#myRollover:hover {
   background: url(someNewImage.gif) no-repeat;
   width: 200px;
   height: 200px;
}

...

<a id="myRollover" href="javascript:void(0);"></a>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Dan

Thanks for your reply - have modified the code as follows:-
Code: 
<html>
<head>
</head>
<body>

#myRollover {
   background: url(Picture_016.jpg) no-repeat;
   width: 100px;
   height: 100px;
   display: block;
}

#myRollover:hover {
   background: url(Picture_017.jpg) no-repeat;
   width: 200px;
   height: 200px;
}

<a id="myRollover" href="javascript:void(0);"> </a>

</body>
</html>

What then displays is the "#myRollover" class code - what am I missing?

FAQ184-2483​
Chris [pc2]
PDFcommander.com
motrac.co.uk
 
Upvote 0 Downvote
Sorry - I assumed prior knowledge of how to put CSS into a document. Wrap the CSS in the following:

Code: 
<style type="text/css">

</style>

and put it in the HEAD of your document.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Dan

No need for apology - unfortunately css required in page, the use of which I am unfamiliar as opposed to the conventional way of utilising css. [sad]

It works exactly as hoped for! [smile]

Many thanks

FAQ184-2483​
Chris [pc2]
PDFcommander.com
motrac.co.uk
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
801
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
824
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
654
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
708
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top