473,465 Members | 1,538 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Hover action to a single image or an image sliced

1 New Member
I have a custom circle pie chart that I want to make interactive. The original opacity of the image is 1 and when the user hovers on a piece of the chart, the opacity changes to .5. My problem is, I can't figure out a way to apply the opacity change on hover to a piece of one, single image. Are there any ways to go about doing this. I can save each piece of the chart as its own file, but then I don't know how to place them in html to look like a circle. Any help or direction is appreciated.
Dec 9 '13 #1
1 1620
Frinavale
9,735 Recognized Expert Moderator Expert
You may be able to accomplish this somehow using an Image Map.

When the user hovers over a particular area you could make an Ajax call to load a new image that displays that section as fully opaque. This would require you making the same pie-chart image for each section of the chart but each image would have 1 section fully opaque while the others are half opaque. That way you can load the corresponding image during the hover over event.


-Frinny
Dec 12 '13 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Jason Heydasch | last post by:
I was at 1800flowers.com today and when I clicked on an item to go to the product page for that item I noticed a script I have to find! If you hover over the small image of the product, a larger...
33
by: Thomas Mlynarczyk | last post by:
Hi, I'm looking for a way to put a 1px solid border around the image in this link: <a href="some.html"><img src="some.gif"></a> Well, that, by itself, is simple. However, I would like to have a...
12
by: Sander Tekelenburg | last post by:
Trying to make some images disappear on hover (works), and others appear on hover (works not). In tested browsers, this gives the expected result: IMG.disappear {visibility: visible}...
2
by: Elisa | last post by:
I have two images, each with defined CSS hover states. I would like a mouseover on one image to trigger the hover state of the other image. Is this possible using javascript? If so, how? Any...
3
by: jason | last post by:
Hello. This one is kinda out there. I have asp.net code that will email my yahoo account a <img> like with image on the server. When I open it in yahoo I get the full image on screen. works...
2
by: Kevin Smith | last post by:
I'm trying to use the hover pseudo-attribute to display footnotes in documentation. The footnotetext is hidden until you hover over the footnotemark. This work well in Safari and Firefox, but I...
2
by: mix2plix | last post by:
ok.. been bangin by brains the past few days with this one and decided to seek you'z help. so here ya go. based on the code below and this concept.. how should i proceed? I have a table of 4...
8
by: Haines Brown | last post by:
I want a hot text string to display an image only when hovered. In the body: .... <a id="link-a" href="#nogo"> <img id="photo" src="..." />hot text </a> ....
1
by: rupak | last post by:
I have an mouseover effect with css on hover, which change the image on hover through Css. It works with IE fine but have problem with Mozilla, as the background image not coming full on hover. If...
10
by: dandyliondancer | last post by:
hola i figured out how to make an image appear next to a link when hovering by displaying it as a block and then using background:url div.menu a{ display:block; } div.menu a:hover{
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.