Complex image mouseover effects using PNGs (need advice)

Hi,
Please take a look at the following 4 elements, and how they behave on mouseover :
http://bit.ly/stuCfM
I am using PNGs here, so that I can overlap the elements.
Osgood_ proposed the following "hot spots" method of swapping images, which would eliminate the hassle of individually positioning the items. All I would need are 5 versions of the same ensemble image, each with a different item highlighted. The tutorial walking us through this method is here : http://www.youtube.com/watch?v=Px8h86sILj8
Problem is, repeating this image 5 times in 5 different files (which is what this method seems to require I do) adds up to 1.8MB in images alone. Placing all 5 states in a single PNG takes up only 400k.
So I'm looking for a way to achieve what is demonstrated in the example at the top of this posting, but using a single PNG with 5 different states represented in it. The "image swapping" would have to be a background shift. The PNG itself would be very long (over 3500 pixels in width) but only 400k (I tried it, that's what it comes out to).
How do you experts recommend I tackle this problem?
PS: Keep in mind, clicking on the highlighted image would call another page. That's why I used <a> tags in my first example.
Thanks!

I've used jQuery & this MapHighlight script with good success.
Details:
http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
Download:
https://github.com/kemayo/maphilight/
Very simple to set-up in the <head> tags. Works with any image map.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/maphighlight.js"></script>
<script type="text/javascript">$(function() {
$('img[usemap]').maphilight();
});</script>
You can customize fillColor, fillOpacity & stroke values in the script (near the bottom):
maphilight.defaults={fill:true,fillColor:"00CC00",fillOpacity:0.4,stroke:true,strokeColor:"99FF33",strokeOpacity:1,strokeWidth:2,
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Similar Messages

Cannot use XPATH - need advice

Hi,
I have a log file with 100's of ebtries like:
<ClientTransaction Type="Receive">
<Timestamp>20070827-004411.361</Timestamp>
<Duration>778</Duration>
<Host>multi</Host>
<Transaction>TicketingRQ</Transaction>
<MPSession>1955268073</MPSession>
<SessionID></SessionID>
<ClientIdentifier>MULTI:10.5.8.17788148</ClientIdentifier>
<XMLRequest></XMLRequest>
<XMLResponse>
<![CDATA[<?xml version="1.1" encoding="UTF-8"?><TicketingRQ Version="0"><UniqueID Type="14" ID="rij7yy"></UniqueID><Tickets TicketType="eTicket" PrintEticketReceipt="false"><Ticket Number="002"></Ticket></Tickets></TicketingRQ>]]>
</XMLResponse>
<HostTransactions>
    <QueryResponse>
      <Response>mhe:rij7yy/002</Response>
    </QueryResponse>
</HostTransactions>
</ClientTransaction>unfortunately when I try to use an xpath it tells me that unicode charaters are not allowed when I try to create a Document object.
So I was wondering, is there an effiicient way using java i/o that I can do the following:
(i) loop around each word "ClientTransaction"
(ii) if TicketingRQ exists in the the Tranaction tags, then write all of the QueryResponse into a new file.
(iii) if it isn't TicketingRQ , append the QueryResponse in the previous file.
reading/writing to a file isn't a problem for me, but I was wondering of I could I suggeston for the best way to approach this please?
Thanks,
Tri

You may need to manually add the namespace to the top of the .BPEL file. I have encountered this previously where I needed to do this.
xmlns:xp20="http://www.oracle.com/XSL/Transform/java/oracle.tip.pc.services.functions.Xpath20"
e.g.
<process name="xxxxx"
targetNamespace="http://xmlns.mo.co.uk/EnterpriseBusinessService/soa-infra/vehicle/PublishVehicle"
xmlns="http://schemas.xmlsoap.org/ws/2003/03/business-process/"
xmlns:client="http://xmlns.mo.co.uk/EnterpriseBusinessService/soa-infra/vehicle/PublishVehicle"
xmlns:ora="http://schemas.oracle.com/xpath/extension"
xmlns:bpelx="http://schemas.oracle.com/bpel/extension"
xmlns:bpws="http://schemas.xmlsoap.org/ws/2003/03/business-process/"
xmlns:ns4="http://xmlns.mo.co.uk/EnterpriseObjects/core"
xmlns:ns2="http://xmlns.mo.co.uk/EnterpriseObjects/core/EBMMetaData"
xmlns:ns3="http://xmlns.mo.co.uk/EnterpriseObjects/soa-infra/vehicle/VehicleEBO"
xmlns:ns1="http://xmlns.mo.co.uk/EnterpriseObjects/soa-infra/vehicle/VehicleEBM"
xmlns:ns5="http://xmlns.mo.co.uk/EnterpriseObjects/soa-infra/customer/CustomerEBO"
xmlns:xp20="http://www.oracle.com/XSL/Transform/java/oracle.tip.pc.services.functions.Xpath20"
xmlns:oraext="http://www.oracle.com/XSL/Transform/java/oracle.tip.pc.services.functions.ExtFunc"
Dave

Using iMovie3 - need advice...

Hello,
I need to convert a simple video clip to upload to my employer's website and link to YouTube. Yes, I have iMovie 3, but running Leopard, and iMovie crashes when I try to export. I thought iMovie would be updated automatically with Leopard, but no. We were going to purchase iMovie '08 but read the fine print and discovered I need an Intel PC processor (this Mac has Dual 1.25 GHz PowerPC G4 processor, so it's compatible with iLife '08', EXCEPT iMovie '08). I'm not going to ask my boss to buy me a new Mac just so I can export this video, so what should I do? Is there a third-party software I can use?
Thanks for your help,
Dave

Thank you. I hate the idea of buying much more than I need, so my boss had a great idea. I'm going to make the video on the <cough> PC Movie Maker and see how well it is received. If we decide to make more videos of our magnetic products, we'll invest in the iMovie/iLife updates.

How to make mouseover effect text show image in popup window or tooltip?

I am trying to display a popup image in a new window when the mouse moves over some text. Or perhaps, the image could display in a tooltip when the mouse moves over some text.
However, I have achieved the functionality of an image appearing above the text when the mouse moves over some text. This is how I did this:
I put this code into the Page HTML Header:
<script type="text/javascript">

</script>
I created a region and put this in the Region's Title field:
{div onmouseover="setFirstChildImgDisplay(this,'inline')" onmouseout="setFirstChildImgDisplay(this,'none')">Check out Page 1 here <img src="#WORKSPACE_IMAGES#DGNR Preview Page 1.bmp" alt="Page 1 Preview" style="display:none;">{/div}
I am thinking that I should not have all of this code in the Region's Title field. But, I don't know where else to put it in APEX.
So my questions are:
1. how to get an image to display in a popup window or as a tooltip when the mouse is moved over some text?
2. where should the {div} content be placed in APEX, if not in the Title field?
Please note that I used '{' & '}' instead of '<' & '>' just so the div would display in this post.
Also, I would like to give credit to this website because this is where I found out how to do what I have provided above.
http://forums.devshed.com/web-design-help-2/mouseover-effect-text-shows-image-321876.html
Thank you in advance,
Maggie

It's just an image map. Play with the settings. Here's a shape layer making a hole in the water and adding a bit of color.

Using .png images in a website?

Being new'ish to Fireworks and the .png format I am really amazed at the quality of png's in a webpage and how the hold their quality. In web design I tend to like placing text over images and this can often have quality issues as text tends not to work to well with a jpeg unless you increase the resolution before hand.
I have found that while I edit an image in FW and place text over an image if I then save as a jpeg the image may not be as clear as I would like, if I keep it as a .png the quality is perfect.
I know why this is but on doing some research have found that .png's are still not universally used across may web browsers and as a result it is advised not to use them.
Some forums say they are fine while others say the opposite in using 'png's in web design, does anyone have any thoughts on this?
I want to use .png's in my web design instead of jpegs but am undecided from what I read on the Internet so would appreciate any thoughts you may have regarding this.
Many thanks, Pete.

On PNG images:
When you "save" from Fireworks, the file contains extra information in the file header which is proprietary to FW. The file will be viewable in a browser, as browsers just ignore the extra information, but the file is larger than is needed for a Web page. To create a .png file for a browser, you want to "export." (I like using the Image Preview function, myself.) There is no difference in the file extension between a fully-editable FW document .png and a flattened exported .png. In a thread some time ago, a poster commented that he gave his Fireworks documents a .fw.png extension, and exported to the plain .png. I've tried to adopt that approach and I find it helps me keep better track of what's what in my folders. It's up to me to remember to do it, though.
Exported PNG images can be 32-bit, 24-bit or 8-bit. Here's the difference:
A 32-bit PNG will represent your FW document with transparency. All the objects will be flattened, of course, but transparent and partially transparent areas will be preserved. The file is 32-bit as you have 8-bits each for red, green, blue, and transparency. Eight bits of data gives you 256 values. (Note: Photoshop calls this a version of the format a 24-bit PNG with transparency.)
A 24-bit PNG does not have transparency. The 24 bits of data are 8-bits (256 values) for red, green, and blue. In this sense, it is similar to a JPEG, although you do not have the data loss or the color shifts.
An 8-bit PNG has 256 colors in a list. In a way, this is similar to a GIF image. The interesting thing about PNG8, however, is that colors in PNG8 in Fireworks can be semi-transparent. In a GIF, you have the option of selecting only one color to be fully transparent.
Using PNG images on the Web
You will want to export to PNG32, PNG24, or PNG8, as appropriate for your needs. Do not overwrite your Fireworks document! If you use Image Preview when exporting slices, and select a .png format, then that setting will be set for that slice. You can't select .png from the Property Inspector.
If you need to support Internet Explorer 6, you can use PNG24 with no problem. IE6 will render any semi-transparent areas of PNG32 or PNG8 images as fully transparent. To support PNG32 in your Web pages on IE6, you need to add special code. Even then, however, your visitors' browsers can lock up under circumstances that are not fully understood (http://blogs.cozi.com/tech/2008/03/transparent-pngs-can-deadlock-ie6.html). If you know your visitors won't be using IE6, or the content in the transparent PNGs is purely decorative, then maybe that's not an issue for you.
Here's a roundup of techniques for using transparent PNGs at Smashing Magazine:
http://www.smashingmagazine.com/2008/04/16/getting-creative-with-transparency-in-web-desig n/
File Size
Choose the best file type for the image you have. No one file type is always better. If you need to support IE6 still, and you can think of how to do your site without transparent PNGs, then the coding will be easier and the cross-browser compatibility will be better. If you use Image Preview (under the File menu item), you can change the quality level for JPEGs. The default level is 80%, which may not be a high enough quality level for a particular image. Higher quality means larger image size, but for photographic elements, a JPEG may still be smaller than a PNG for a given visual quality. It depends on the image content; each image is different.
Gradients and Banding
Fireworks creates strict numerical interpolations between the two colors you use for your gradients. If the colors are close together, you may not have enough intermediate colors to span the distance you want to cover and you will get bands. Photoshop produces what appear to be smoother gradients, because that application adds subtle noise into the gradient to prevent banding.
Indexed Palettes
If your image contains more than 256 colors and you select an image format with an indexed palette (GIF or PNG8), you may find that Fireworks produces a palette with fewer than 256 colors. This is a known "feature" of the program and there's no known workaround. If you decide to produce transparent PNG8 images, you need to be aware that this can happen.
And...that's all I can think of that touches on your issues.

MouseOver effect needed ofr map hot spots

Hi friends!
I need help with Adobe flash AS3/ I have a map that I want to make in Flash with mouseover effect. Example map is here http://www.elabram.com/index.php?r=client/index, but it is made with CSS.
What I need?
1) When mouse is over the location pin it must show infobox. Yes similar what Google Places does. but with mouse over effect, not on Click.
I was using Adobe Flash 5.0's default code snippets and got stuck after this code bolow... I'm new to Flash, sorry but learn very fast/
/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.
Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
   The code will execute when the symbol instance is moused over.
movieClip_2.addEventListener(MouseEvent.MOUSE_OVER, fl_MouseOverHandler_6);
function fl_MouseOverHandler_6(event:MouseEvent):void
          // Start your custom code
          // This example code displays the words "Moused over" in the Output panel.
          trace("Moused over");
          // End your custom code
Thanks in advance
Aldi

BTW,
I just need codes that go here in {} where it says //Start your custom code
function fl_MouseOverHandler_6(event:MouseEvent):void
          // Start your custom code
          // This example code displays the words "Moused over" in the Output panel.
          trace("Moused over");
          // End your custom code
Thanks
Aldi

Using PNG format with max width without clipping top and bottom of image?

I am using PNG format to preserve the transparency and drop shadow I am trying to incorporate to give the illusion that this slab object is floating above the other layers. I first tried file>place to position the menu object on edge of header/beginning of content. Doing that leaves no options to force the image to span the width of whatever screen. I need that so I've tried using object>fill> and then clicking the max width of the rectangle (which does solve the max width problem), but I am now dealing with a clipping problem of the top and bottom of the image. The next thing I can think of is to go back to Photoshop and distort the image so it isn't as tall. I feel there has to be a simpler way to accomplish this that won't also give my image a unnatural look. Thoughts? Thanks in advance.

Thanks, that helps. I also found that I cropped to much of the canvas. After increasing the canvas area AND setting to fill all is well now. I think your suggestion may help with the scrolling affect problem I'm having when using different resolutions. I am going to try to set the size in one dimension (height) so that different resolution screens see the same scroll actions. Thanks Mylenium!

Enlarging an image on mouseover without using Flash

Enlarging an image on mouseover without using Flash
I use DW MX 2004 with Windows 2000
I want to create the following effect. I have two versions of
an image,
geyso_scr... (which is screen size) and geyso_sm (which is
small). On
mouse-over I want a larger window to open on top of my html
page (but
less than the full screen) and show the larger image file in
whatever
size I have created it.
One mouse-off I want to restore the original image.
I tried this with a straight image swap on the following
page:
http://www.tudo.co.uk/testing/hospiz_stiftung/shell/contents/vorstand/vorstand.html
see row 2, image 1, Peter von Geyso.
This works all right (on mouseover there is a shift of about
1 px) but
the screen sized image has been sized down to the original
image (sm image).
How can I conveniently get the large image hovering on top of
the
existing page?
Can someone recommend a tutorial which describes how this is
done?
Or is there a utility which does it?
On similar lines, a client wants to display a list of items
as text in
comparatively small font. On mouse-over he wants the
list-item in
question to become slightly larger (not only to change colour
etc). Can
that be done without converting the text into images.
Is there any tutorial for that?
(No point in arguing with the client that the text should be
made large
enough to read in the first place. I have tried that in
vain.)
Thanks for your help.
Adrian

netlace design wrote:
> Hey Adrian,
>
> Maybe this will work for you. Take a look here at this
demo
>
>
http://www.cssplay.co.uk/menu/magnify
Hi Netlace Design,
This looks interesting, but where do I get the code for this.
How is it
done without javascript.
Thanks,
Adrian

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

JMS to Synchronous Web Service Scenario (Need Advice to use BPM or Not)

Hi Experts,
We have a scenario where we fetch data from JMS Sender and Send it to MDM Webservices.
We want to have the files processed in such a way that until we get a response from webservice back that it was sucessful ,then only we need to process the next file.
We would need advice as can we use BPM for this.
We are thinking of having BPM like this:
RecieveStep(Asyn)-SynchronousSend Step(with wait)-Stop
The problem with this is when processing huge files the processing time of the Queue is taking very long and sometimes we are getting SYSFAIL.
Please would anyone advice as how can we approach this scenario either using BPM or without.
Also Can we use multiple queues or multpile instances concept for this scenario.
Please Advice.
Thanks in Advance
Regards
J

Hi Prateek,
Thank you very much for your quick reply.
The response from Webservice does not need to be sent anywhere.
We just want that after recieving the response back from webservice(SOAP) then only we need to process the next file.
Can we control something from Sender JMS adapter side as well as it is picking up all the files and all files wait at BPE until each one gets processed.
Is this possible without BPM or with BPM.
Please advice as what wud be possible steps inorder to achive it through BPM or Without BPM.
Thanks and Regards,
J

I'm desperately needing advice to a common question. I use Quicken and love it. But the Mac version is not as great as the PC.   Has anyone installed it by segmenting their Mac with Parallels or Fusion or Boot camp. If so, which one do you recommend.

I'm desperately needing advice. New Mac.   Used Quicken on my PC. Researched all software for Financial programs and Quicken is still the most recommended.   I want to use Quicken on my Mac. The Mac version is not highly rated so I would need to partition my Mac.   Has anyone done this for their quicken program and if so, which partitioning program did you use - Parallels, Fusion ware or Boot camp?
Thx

Lisa Ellies-Laye wrote:
Thanks. Hadn't heard of it. ? Is there any concern installing this free program on my Mac.    Have you used it? Apart from being free is there any other advantage of Parallels and VMfusion. ?
Virtual Box is safe and well developed, it offers similar or identical features to the paid competition, it may be a little less polished but that's all.
Download and try it out, nothing to lose (except time).

HT201376 How do I go about unlocking a recovery HD? Also I need to know what disk image should I use when trying to restore a failed(erased) disk in DU?

Also I need to know what disk image should I use when trying to restore a failed(erased) disk in DU?

You need to plug it into your computer running iTunes and restore it. Have you tried that? If so, what happened?

Need Advice: Re-Ripping ALL of my CDs using ALAC/Apple Lossless

I need advice from some experienced users (having searched for answers for a couple of days and not finding a comprehensive solution). I want to "upgrade" my iTunes library (95% of which is from my CD collection) from ACC (the default iTunes file format) to ALAC (lossless format). I realize that music purchased from the iTunes store will remain in ACC format, but I am using this opportunity to "archive" or "digitize" my CD collection. I have some, but not a lot, of non-critical tags, album art, etc. set up with my current library. I will be saving all of the music files in a new folder on a single hard disc on my network (with backup). I use iTunes Match. I have Windows PCs, Macbook Pro (OSX), iPhone, iPad, iPod. Given these factors, I am seeking recommendations:
Does it make sense to "start over" and create a brand new iTunes library?
(this would certainly give me time to complete my project while still using my current iTunes library)
If yes, what do I need to do in order to "activate" the new library once it is complete in order to reset iTunes Match and all of the other devices using my iTunes library? What complications can I anticipate?
If no, what is the best way to replace the existing albums in my iTunes library with the new ALAC files? Do I simply insert the CD and import it with my new settings? Will iTunes take care of the rest (saving the new file, deleting the old format, matching tags, etc.)? What complications can I anticipate?
What are the advantages/disadvantages of allowing iTunes to "Keep iTunes Media folder organized" and "Copy files to iTunes Media folder when adding to library?"
Any other suggestions, warning, smart alec remarks?
I know there are a lot of questions bound up in this post, but if you have converted your iTunes music collection to one of the lossless or uncompressed formats, I would love to learn from your experience (and am guessing others will as well). Thanks!

In most cases you should be able to re-import your CDs to the existing library - iTunes will automatically replace your media files and retain all previously added metadata. This does depend on the library being the same one as you originally imported the CDs in AAC format (i.e., the same computer or the result of a complete library migration). You should experiment with a couple of CDs to verify this behavior - I've done this successfully to "update" some of the older content of my library which had been imported as 128kbps AAC to 256kbps..
Obviously this approach will put your media into the existing library media folders, which is going to be the simplest approach. If you subsequently want to move the library to a different drive, see turingtest2's user tip on Make a split library portable. If you're concerned about running out of disc space on the drive that currently hosts your library, you could follow these guidelines to move the library to a second, larger drive before starting to re-import using ALAC.
This is the approach I'd recommend, though there are a couple of other possibilities:
Create a new, empty library on the second drive by holding down SHIFT as you start iTunes; when you see this prompt:
click on Create Library..., navigate to the second drive and create the library there (best approach is to create this in a new iTunes folder in the root of the drive. This will guarantee "clean" imports but you'll not be able to re-use any metadata, artwork, playlists, etc. contained in your current library. To switch between libraries, SHIFT-start and use the Choose Library... option to select the library you want to be active.
On the second drive, create a folder called iTunes in the root and a folder called iTunes Media inside this. Then, with iTunes running against your current library, select Edit > Preferences > Advanced, change the iTunes Media folder location to the one you've just created (i.e., X:\iTunes\iTunes Media, if the second drive is "X:". Also make sure that the Keep iTunes Media folder organized and Copy files to iTunes Media folder... options are checked. When you re-import your CDs the media files should be placed on the second drive ... note, though, that I've not verified that this approach will work - in theory it should do but you should definitely test with one or two CDs before going any further. This approach will result in a "split" library where your library database is on the C: drive and the media divided between drives (since your iTunes Store purchases will still be on C:). This is generally not a good idea (if for no other reason than making creation and maintenance of a backup of your library more difficult). Again, tt2's notes on Make a split library portable describe how to bring the library into a consistent, well-formed layout.

Need advice on a DVD program that I can use to Airstream to Apple TV via iMac

Need advice on a DVD program that I can use to Airstream To Apple TV

If you have mountain lion you should be able to mirror your screen on your Apple TV through an airplay settings pane in system preferencse.

Hello friends, need advice on what PREPAID broadband (USB TYPE)(compatible) to use... I'm from the Phils, i use macbookpro macosxLION 10.7.2

need advice/help

my mbp (Leopard) used to work w prepaid wireless broadband (usb type) here in the phils... but when i upgraded my osx to LION... it dsnt any more... ds any1 have sol'n w this?

Complex image mouseover effects using PNGs (need advice)

Similar Messages

Maybe you are looking for