Image Mapping and Rollover Popups |
Image Mapping and Rollover Popups |
Dyeruz |
May 31 2007, 04:43 PM
Post
#1
|
Group: Members Posts: 3 Joined: 31-May 07 Member No.: 2,959 |
Hello, I want to mouse over sections of my image map and have each section popup a different picture. I had some knowledge with rollovers as pertaining to sliced images that were separately uploaded to sites such as photobucket et all. but I have problems with the image mapping as where and how to insert the rollover code when the initial code for the sections I want to mouse over look like this:
<area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369"> can anyone help? site url: http://www.myspace.com/tendaiac thank you! |
Frederiek |
Jun 1 2007, 02:35 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
See the FAQ at http://htmlhelp.com/faq/html/images.html#imagemap
|
Dyeruz |
Jun 1 2007, 11:38 AM
Post
#3
|
Group: Members Posts: 3 Joined: 31-May 07 Member No.: 2,959 |
Thanks for the reply, I do have some understanding of css and html as related to sliced images but because the image mapped code is generated by in this case dreamweaver I'm looking for a way to insert the rollover code without messing up the functions of the image mapped profile so after the : a.classname:hover span{ display: block; position: absolute; left:50%; top: -44px; left: 255px; width: 285px; padding: 5px; margin: 10px; z-index: 5; filter:none; text-align: center;text-decoration:none;} the html code usually looks like this : <a class="classname" href="URL TO LINK"><img src="URL TO ROLLOVER IMAGE HERE(CLEAR GIF)" border="0"><span><img src="URL TO POP UP IMAGE HERE"/></span></a> </div> but my image mapped code looks like this for example: <area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.mysace.com/index.cfm?fuseaction=user.viewprofile&friendid=13895316"> so how would I incorporate the standard rollover code onto the image mapped code..this make sense? thanks |
Frederiek |
Jun 2 2007, 05:58 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
A quick Google search on "CSS imagemaps" returned, to mention a few wellknown:
ALA's article on CSS Sprites: Image Slicing’s Kiss of Death CSSplay: CSS Image map and CSS Image Maps: Flickr-like Technique? Others may be of interest to you too. |
Dyeruz |
Jun 6 2007, 06:39 PM
Post
#5
|
Group: Members Posts: 3 Joined: 31-May 07 Member No.: 2,959 |
A quick Google search on "CSS imagemaps" returned, to mention a few wellknown: ALA's article on CSS Sprites: Image Slicing’s Kiss of Death CSSplay: CSS Image map and CSS Image Maps: Flickr-like Technique? Others may be of interest to you too. hi and thanks but articles still dont answer my "specific" question. anyone know? |
IdeaZone |
Jun 9 2007, 01:12 PM
Post
#6
|
Group: Members Posts: 4 Joined: 9-June 07 Member No.: 3,043 |
I would actually build it in Fireworks instead of Dreamweaver since it is completely graphical anyways -- then export the code directly to where you want to post it.
J |
pandy |
Jun 9 2007, 09:02 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Hello, I want to mouse over sections of my image map and have each section popup a different picture. I had some knowledge with rollovers as pertaining to sliced images that were separately uploaded to sites such as photobucket et all. but I have problems with the image mapping as where and how to insert the rollover code when the initial code for the sections I want to mouse over look like this: <area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369"> <area shape="poly" alt="" coords="718,128, 718,73, 681,89" href="http://profile.myspase.com/index.cfm?fuseaction=user.viewprofile&friendid=11875369" onmouseover="doYourStuff()"> |
Lo-Fi Version | Time is now: 26th April 2024 - 12:58 PM |