Text / Image Hover Effects

I am having trouble trying to figure out how to create a
hover effect, that when you hover over some text, a Image will show
up in a seperate
table / cell. I have been able to map hover effects to
specific places / positions, but I can't figure out how to get it
to show up in a specific cell. To top it off I need to beable to
get several images to show up in different cells when you hover
over one piece of text.
I am open to almost anything that can accomplish this, Java
Script, PHP, CSS, etc.

On Fri, 8 Dec 2006 05:27:10 +0000 (UTC), "Stupidav"
<[email protected]> wrote:
>I am having trouble trying to figure out how to create a
hover effect, that
>when you hover over some text, a Image will show up in a
seperate
table /
>cell. I have been able to map hover effects to
specific places / positions,
>but I can't figure out how to get it to show up in a
specific cell. To top it
>off I need to beable to get several images to show up in
different cells when
>you hover over one piece of text.
>
> I am open to almost anything that can accomplish this,
Java Script, PHP, CSS,
>etc.
It's called a disjointed rollover. If you Google that term
you'll find
lots of tutorial help. This is one:
http://www.dwfaq.com/tutorials/basics/disjointed.asp
Good luck.
Steve
steve at flyingtigerwebdesign dot com

Similar Messages

CSS mouseover image hover effect in iWeb?

I've been trying to create an image hover effect when placing the mouse over an image or clicking on the image on my website made in iWeb. The only problem is that the HTML widget doesn't allow the image hover effect to only activate when the mouse is over the widget and not the image. If anyone know some simple code I could put into my website's HTML file, it would be great. It actually doesn't have to be a hover effect, the image just has to change on mouseover.
My website is temporarily located here: http://dl.dropbox.com/u/19707357/Website/Chocoa/tavlen.html

I referred you to that page to see if the effect was what you wanted! The examples use javascript.
You originally asked for CSS and its better to use this since the browser only has to load one image instead of two.
Here's an example of a rollover using CSS and a sprite...
http://www.iwebformusicians.com/iweb-snippets/sprite.html

2 text a:hover effects using CSS

Hi, I am trying to find a way to get text links to work differently with "colour and roll over" in my html page.
I have a few table within the page "body" with one "id" as an example as id="content"
How can I get the id="content" to have a different roll over effect to the main "body"
I'm using CSS and this is what I am using bellow for the body roll over:
body,td,th {
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #FFFFFF;
a:link {
          color: #CCCCCC;
          text-decoration: none;
a:visited {
          color: #CCCCCC;
          text-decoration: none;
a:hover {
          color: #FFFF00;
          text-decoration: underline;
a:active {
          color: #FFFF00;
          text-decoration: none;
============================================================================
This is what I have so far in CSS for the id="content" but not working with a conflict between the two link:
============================================================================
#content
a:link {
color: #6600FF;
text-decoration: none;
a:visited {
color: #FF00FF;
text-decoration: none;
a:hover {
color: #000000;
text-decoration: underline;
a:active {
color: #6600FF;
text-decoration: none;
Any help would be appreciated?
Gary

"body a:link" is the same as a:link since the <body> tag is the ancestor of all content tags.
The purpose of a compound (or descendant) selector (e.g. #content a:link) is to target certain tags in specific parts of a page.
So a:link is the correct syntax for a generic rule for all unvisited links on a page.
Then you've correctly targetted links inside id="content" via the other, more specific, rules.

Image hover effects with centred title

Hi All,
I would like to add to my images a nice slick looking image overlay which has the title of the product in the middle. Can anyone point me in the direction of a good one please. I have searched for a while now and cannot find one which has a vertically centred text in the middle of it.
Any help would be greatly appreciated!
Thank you.
Alex

Alex_roo wrote:
Sorry another quick question. Can this be made to fit with a responsive design. I have just tried width and heights to auto but that doesn't work. Thanks again.
Here's a quick tweak of Jons code.........still have to play around with vertically centering the text at various media query breaks, but it's responsive.
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Fade In Info</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
font-size: 17px;
img {
max-width: 100%;
height: auto;
#wrapper {
width: 88%;
margin: auto;
overflow: hidden;
.content {
float: left;
width: 46%;
position:relative;
margin: 0 2% 0 2%;
.content p {
opacity: 0;
.fade{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align:center;
vertical-align: middle;
color:rgba(0,0,0,0);
-webkit-transition: all 500ms;
transition:all 500ms;
.fade p {
margin-top: 48%;
color: #fff;
.content:hover .fade {
background-color:rgba(0, 0, 0, .35);
color:rgba(0,0,0,1);
opacity: 1;
.content:hover .fade p {
opacity: 1;
@media screen and (max-width: 500px)
.fade p {
margin-top: 42%;
@media screen and (max-width: 480px)
.fade p {
margin-top: 48%;
.content {
float: none;
width: 100%;
margin: 0 0 15px 0;
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<img src="woman_face.jpg" style="display: block;">
<div class="fade"><p>Some text or whatever</p></div>
</div>

<div class="content">
<img src="woman_face.jpg" style="display: block;">
<div class="fade"><p>Some text or whatever</p></div>
</div>

</div>

</body>
</html>

Is it possible to have a hover effect easing out on multiple images when hovering on others?

Im trying to use four small images to create a large image by using a hover effect. However when i hover over an image for instance 3 of 4, after hovering over 1 and 2, number 1's ease-out effects snaps back to the background image, rather than continuing to ease-out. Which i do not want. Is it possible to have numerous ease-out effects working at the same time? Using CSS.

Could you show us a bit more of what you've done so far?
I'm not sure I understand the desired result.
Can you put your files online somwhere?
Thanks

Hover effect without it actually being a link?

I have some text that displays more text when you click on
it, and FAQ script. To help users know that it will do something I
wanted to make it act like the other links on my page that bold
when you mouse over them. I achieved this by putting a # for a link
location. Worked great but then I realized that its now refreshing
the page bumping you up to the top and loosing your spot.
Is their away to to get the hover effect without it actually
being a link?
http://www.ewdcorp.com/services_environment.html

"c-fqgy" <[email protected]> wrote in
message
news:fqrsg8$t82$[email protected]..
> Hi Tierry,
> Well that?s disappointing to hear! I actually tried
working with your
> script
> when I first went looking for an FAQ style toggling menu
but at the time I
> couldn't get it to work. I think at the time it was just
intimidating to
> me
> because I didn't fully get it. Since working with this
other script,
> through
> trial and error I think I have a better grasp of how it
works and reading
> your
> article seems far more straight forward (not that it
wasn't before).
> Anyways I
> will take your suggestion and hopefully be able to fix
my error.
>
> Just to be clear though, do you mean I should reconsider
my sites
> construction
> because I have surrounded it with extra formatting crap
or is it actually
> the
> way the actual Javascript that I have in my head tags
that isn?t correct?
To be honnest with you I don't know about your site
construction, I only
peeked at your DT, that's why I pasted the following in my
previous post:
<dt class="text_body" style="cursor: pointer;">
<span style="font-family: monospace;"></span>
<img width="11" height="8" alt=""
src="images/Bullet.jpg"/>
<u>
<a href="#">Contaminated Site Remediation Design and
Management</a>
</u>
</dt>
The inline styles and the empty span are not "elegant", but
that's ok. The
problem is that a DT cannot contain a UL and a UL cannot be
LI-free.
Also, you have BR elements between your DTs/DDs if I recall
and that's not
kosher either.
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
Keep your markup *clean* with these DW extensions and
scripts:
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php

Cool image hover extension wanted

A few weeks back I was browsing adobe exchange and came
across a neat little image hover state. Now that I want it I can't
find it even after going through my browser history. Any ideas?
When the cursor was over an image, a new image hovered over the
top. This image was pinned to the cursor position by its bottom
left corner and moved with the cursor as long as it remained in the
area of the initial image. Once off the image the hover state
cleared.
It needs to be mac compatible.
Thanks

What is your question specifically?
The effect is quite attractive....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"KerryHillBilly2" <[email protected]> wrote
in message
news:gp5qao$22b$[email protected]..
> No joy Murray.
>
> Just so as you can see, here's the page I'm working on
and the script:
>
http://www.glampamtextiles.co.uk/html/shopred.html
>
http://www.glampamtextiles.co.uk/scripts/wz_tooltip.js
>
> Walter's instructions are?
>
> For each of the following config variables there exists
a command, which
> is
> just the variablename in uppercase, to be passed to
Tip() or TagToTip() to
> configure tooltips individually. Individual commands
override global
> configuration. Order of commands is arbitrary. Example:
> onmouseover="Tip('Tooltip text', LEFT, true, BGCOLOR,
'#FF9900', FADEIN,
> 400)"
>
> which is different from your suggestion and it's this
that I'm trying to
> make
> work. I probably don't need to use it on this site, but
I'm keen to build
> up my
> understanding of how these things work, so in the future
I've got the
> means at
> my disposal.
>
> Thanks,
>
> Simon
>
>
>
>
>

Hover effect not shown in design view

Is there a setting that will allow me to see the hover effect I created in CSS? The cursor doesn't even turn to a hand so I imagine that cursor effects probably don't work either.
Is there a setting or something so I can see them? Right now I open Homesite and view it there.
I also noticed that Ctrl+B doesn't make selected text bold/strong nor Ctrl+I italic. Is that another setting?
I love Dreamweaver because it hjas enhanced some Homesite stuff but the things it dropped are frustrating.
Thanks for your help!

To see rollovers, hover effects, etc.. you need to save your page (Ctrl+S) and Preview in Browser.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Trying to do this cool hover effect with CSS only...

I've got 'img' thumbnails that are sometimes positioned
absolutely,
sometimes relatively, but aren't individually contained in
anything, like so
<a href="#">
<img src="image1.png" width="100" height="150" border="0"
class="tn" />
</a>
<a href="#">
<img src="image2.png" width="100" height="150" border="0"
class="tn" />
</a>
Now, I've already brought up the limitations of PNG on IE
(namely, even if
you "fix" PNG support on IE, IE will flatten your alpha
channels and strip
the individual pixels' transparency levels before overriding
them with a
single common attribute). This limitation makes it impossible
for me to do a
simple 90%-to-100% hover effect to "highlight" the thumbnail
on mouseover.
Micha recommended placing normal a highlighted versions of
the same
thumbnail inside and outside the viewport, and swapping them
on mouseover.
However, that would double the amount of image data being
sent to the user.
So what I thought to do, instead, is superpose a standalone
PNG of a small
spotlight, OVER the original thumbnail, on hover. Because it
would be the
same PNG being superposed over each thumb being hovered over,
the amount of
image data being sent to the user wouldn't be all that
different.
Would I need javascript for this, or can it be done with CSS
only?
Again, it would be the same spotlight.png file being
superposed on images on
mouseover, and it wouldn't be a big deal if the image bled
over surrounding
images (it would actually make it look more real).
Thanks.

say wha???
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Nobody can disagree with that analysis, but a LOADING
page would do
nothing
> to help with this, doncha know?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Nancy O" <[email protected]> wrote in
message
> news:[email protected]...
> > Sprite images are a tad smaller in filesize than
the sum of their
> > individual
> > parts. As you say, Murray, it's marginal. But the
real *efficiency*
> > comes
> > from fewer server requests to load multiple images.
Once the sprite has
> > loaded, there is no perceivable delay on hover - as
there often is with
> > conventional image swapping. Finally, since the
substitution effect is
> > pure
> > CSS, there's no need for JavaScripts which can add
weight to a page.
> >
> >
> > --Nancy O.
> > Alt-Web Design & Publishing
> > www.alt-web.com
> >
> >
> > "Murray *ACE*"
<[email protected]> wrote in message
> > news:[email protected]...
> >> By their nature, sprites are larger
dimensionally than the individual
> >> images, so the savings would be marginal, I
think. What I mean by that
> >> is
> > a
> >> simple rollover sprite would be the same size
as the combined up and
over
> >> images, placed adjacent to each other, no?
> >>
> >> --
> >> Murray --- ICQ 71997575
> >> Adobe Community Expert
> >> (If you *MUST* email me, don't LAUGH when you
do so!)
> >> ==================
> >>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
> >>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> >> ==================
> >>
> >>
> >> "Nancy O" <[email protected]>
wrote in message
> >> news:[email protected]...
> >> >< Micha recommended placing normal &
highlighted versions of the same
> >> > thumbnail inside and outside the viewport,
and swapping them on
> > mouseover.
> >> > However, that would double the amount of
image data being sent to the
> >> > user.>
> >> >
> >> > Not if you use a sprite. Have a look at
this CSS Sprite Demo.
> >> >
http://alt-web.com/CSS-Sprite-Demo.html
> >> >
> >> >
> >> > --Nancy O.
> >> > Alt-Web Design & Publishing
> >> > www.alt-web.com
> >> >
> >> >
> >> >
> >> > "Mike" <[email protected]> wrote in
message
> >> > news:[email protected]...
> >> >> I've got 'img' thumbnails that are
sometimes positioned absolutely,
> >> >> sometimes relatively, but aren't
individually contained in anything,
> > like
> >> > so
> >> >> :
> >> >>
> >> >> <a href="#">
> >> >> <img src="image1.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >> <a href="#">
> >> >> <img src="image2.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >>
> >> >> Now, I've already brought up the
limitations of PNG on IE (namely,
> >> >> even
> >> >> if
> >> >> you "fix" PNG support on IE, IE will
flatten your alpha channels and
> >> >> strip
> >> >> the individual pixels' transparency
levels before overriding them
with
> > a
> >> >> single common attribute). This
limitation makes it impossible for me
> >> >> to
> >> >> do
> >> > a
> >> >> simple 90%-to-100% hover effect to
"highlight" the thumbnail on
> >> >> mouseover.
> >> >>
> >> >> Micha recommended placing normal a
highlighted versions of the same
> >> >> thumbnail inside and outside the
viewport, and swapping them on
> >> >> mouseover.
> >> >> However, that would double the amount
of image data being sent to
the
> >> > user.
> >> >>
> >> >> So what I thought to do, instead, is
superpose a standalone PNG of a
> >> >> small
> >> >> spotlight, OVER the original
thumbnail, on hover. Because it would
be
> > the
> >> >> same PNG being superposed over each
thumb being hovered over, the
> > amount
> >> > of
> >> >> image data being sent to the user
wouldn't be all that different.
> >> >>
> >> >> Would I need javascript for this, or
can it be done with CSS only?
> >> >>
> >> >> Again, it would be the same
spotlight.png file being superposed on
> > images
> >> > on
> >> >> mouseover, and it wouldn't be a big
deal if the image bled over
> >> > surrounding
> >> >> images (it would actually make it look
more real).
> >> >>
> >> >> Thanks.
> >> >>
> >> >>
> >> >
> >> >
> >>
> >
> >
>

Hover effect... made larger

Hi... not the biggest web genius but know a little. I've set up a hover effect on some links to show a blue background when you roll over. The 'blue' surrounds the type pretty tight... the highlight colour surrounds the text above and below but not the sides. This may not make much sense but if i direct you to this site:
http://www.maaku87.co.uk/
... and tell you that when you hover over a link the surrounding grey box is a lot larger than the text. My hover effect doesn't produce a box as large as this. There is no colour bleed to the sides of the type just above and below.
Can anyone tell me how i can produce the same result as this site?
thanks

Add some padding, line-height, width in ems and display:block to your menu code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical List Menu</title>
<style type="text/css">
#vertical li {
list-style: none;
font-size: 14px;
text-align:center; /* adjust as desired */
#vertical li a {
display: block;
text-decoration: none;
font-weight:500;
width: 8em; /* adjust as needed */
line-height: 3em; /* adjust as needed */
padding: 5px; /* adjust or omit */
/* optional borders & colors */
border: 1px solid #AAA;
background: #DDD;
color:#333;
/**menu style on mouse-over/focus**/
#vertical li a:hover,
#vertical li a:focus,
#vertical li a:active {
background: #666;
color: #FFF;
</style>
</head>
<body>
<h3>Vertical List Menu</h3>

<ul id="vertical">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three </a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a><li>
<li><a href="#">Item Six </a></li>
</ul> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Rolling text/image transition?

okay so i'm completely stumped on this one...i'm trying to
create an effect where when you click on a button like 'about us'
or 'services' the text/images/information on teh page rolls up from
the bottom (which i know how to do) but then i need it to roll up
and out of site when I click on a different button while the new
information rolls up from the bottom to replace the old
information..there is an example of it at this template if you
click on the menu buttons one at a time:
http://templates.entheosweb.com/template_number/16755.asp
its obviously actionscript but I dont know how to signify that once
another button has been pushed then the current frame information
needs to transition out...you know what i mean?
help!

Sorry, I could not understood your above Post Reply("OCR functionality is available programmatically to custom Acrobat plugins"). Could you explain little more.
Thanks,
Prabudass
[email protected]

Mouse hover effect issue

I real like the picture hover effect on the template site.
http://www.templatemonster.com/flash-templates/28092.html
But I don't ability to create a same one.
Please give some advance.

Can we give hover effect to image in html file? actually i want to add 2 buttons with different background image that should act like a hover effect, i took help from many sites
http://www.wordpresstemplates.net/
Thanks in adv.
Syed

Hover Effect Follows My Mouse Everywhere After it's Loaded

Hi,
I've created the hover effect in a movie clip (called
characters_mc) and placed it on another movie clip (main_mc) and
this main_mc is placed on my main timeline. I would like the hover
effect to display only on the characters_mc but the hover effect
applies to everything else on the scene (when the characters_mc is
loaded). The hover effect follows my mouse after the characters_mc
is loaded.
Here is the AS I have placed on the main_mc:
b1.onRollOver = function() {
_root.captionFN(true, "pick me!", this); //display the
function (true) or to hide the function (false)
this.onRollOut = function() {
captionFN(false);
b2.onRollOver = function() {
_root.captionFN(true, "Hi!", this);
this.onRollOut = function() {
captionFN(false);
b3.onRollOver = function() {
_root.captionFN(true, "Get Jac'd Up!", this);
this.onRollOut = function() {
captionFN(false);
b4.onRollOver = function() {
_root.captionFN(true, "Boo!", this);
this.onRollOut = function() {
captionFN(false);
b5.onRollOver = function() {
_root.captionFN(true, "I'll be your guide", this);
this.onRollOut = function() {
captionFN(false);
b6.onRollOver = function() {
_root.captionFN(true, "Welcome!", this);
this.onRollOut = function() {
captionFN(false);
_root.captionFN = function (showCaption, captionText, bName)
if (showCaption) {
createEmptyMovieClip("hoverCaption",
this.getNextHighestDepth());
cap.desc.text = captionText;
cap._width = 7*cap.desc.text.length;
cap._alpha = 75;
if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
hoverCaption.onEnterFrame = function() {
cap._x = _xmouse+xo;
cap._y = _ymouse+yo;
cap._visible = true;
} else {
delete hoverCaption.onEnterFrame;
cap._visible = false;
Any help would be greatly appreciated. I know other related
topics have been posted and I have read them, but nothing seems to
help my problem. Sorry if this seems redundant but I would really
appreciate any help or advice.
Thanks

Have you tried resetting the PMU?
The PMU (Power Management Unit) controls trackpad function, so resetting it often helps when the trackpad isn't working (or isn't working right).

Import text image in Dreamweaver

Hi All
I have designed some text headings (which are in colour) with a transparent background in fireworks and exported it (gif) to Dreamweaver. That is all good. But when I place the text image (as a background image) in Dreamweaver the text has (in places) white edges which I dont want. Any ideas why this is happening???
Any advice
Paul

The effect that you're experiencing is known as "jaggies". When exporting from Fireworks, you need to set the Matte colour picker to a similar colour to your background.
A better solution, though, would be to use an embedded web font. You can get a lot of free webfonts from www.fontsquirrel.com. Alternatively, if you're using the Creative Cloud, you have access to a lot of TypeKit fonts.

Textured Text with after effects

Hi all,
I just want to know if there's a way that I can generate a textured text in after effects.
Thank.

Hi,
Thanks for the site as I'll check it out.
Date: Tue, 15 Dec 2009 19:12:16 -0700
From: [email protected]
To: [email protected]
Subject: Textured Text with after effects
The question isn't really clear to me, so I'll take a guess and suggest that you look into using a http://help.adobe.com/en_US/AfterEffects/9.0/WS3878526689cb91655866c1103906c6dea-7cf6a.htm l as a http://help.adobe.com/en_US/AfterEffects/9.0/WS3878526689cb91655866c1103906c6dea-7cf9a.htm l, with the underlying (fill) layer being a texture image.
I'll also remind you that doing a simple search using the http://community.adobe.com/help/search.html?q=texture+text&l=aftereffects_product_adobelr is a good way to get answers to questions like this.
>

Text / Image Hover Effects

Similar Messages

Maybe you are looking for