CSS code to change cursor to magnify symbol on hover over specific images
Hi to you experts out there! I'm having a problem getting my CSS code to work. (I'm using Adobe CS4 Design Premium)
The web pages I'm working on are a gallery of images, with linked thumb images to the left which when clicked show the complete image on the right of the page. All 'main images' can also be clicked on to link to the next main image along, corresponding to the order of the thumbs. However, some 'main images' when clicked on are linked to larger, full page versions of an image. In this instance I want the user to see the pointer/cursor to change from the little hand to a magnify symbol when hovering over these specific main images. This is where I can't get the css code to work/achieve this.
For your info the main images reside in '#main_image' div. There is a compound CSS Rule for the main image pic called 'main_image a img', for a 2px, white border. There is then a hover state for this 'main_image a img:hover' where the border changes colour. (the main pic is assigned the ID 'img')
I have created a new compound CSS Rule for specific main images, where I want the cursor to change to a magnify symbol, again corresponding to the '#main_image' div, named 'main_image a zoomin' and also a hover state, 'main_image a zoomin:hover'. These two still have the same border attributes as above, 'a img' and 'a img:hover' (these main pics have been assigned the ID 'zoomin'). However, this is where I have also added CSS code for the cursor change. I have tried 15 or so variations of the following, without success:
#main_image a zoomin {
cursor: url ('images/magnify.cur'), pointer;
[then the border attributes...]
and...
#main_image a zoomin {
cursor: url ('images/magnify.cur'), -moz-zoom-in, auto;
[then the border attributes...]
What am I doing wrong? This can't be difficult! Would welcome some help please!
(Within the root directory: WinVista(C)/local_sites/sjcillustration/images' there are two files 'magnify.cur' (a downloaded img) and 'magnify.png' (my custom img - created in Illustrator, which I would actually prefer to use, but can't export as a .cur file). )
Call me Capt. Obvious, but why can't you put a "magnify" icon next to or below the thumbnail image along with the words "Click to Zoom?"
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com
Similar Messages
-
How do I change cursor to hand pointer when hovering over image?
Title says it all.
I'm trying to get the hand cursor when user hovers over an image that's a link.
Thanks!hi.......
if u want to change the cursor on Image than two property u have to change <......buttonMode="true" useHandCursor="true".....> OR if u want to change the cursor on label than u have to change <......buttonMode="true" useHandCursor="true" mouseChildren="false".....>
OR u can set the mouseOVER event and handler in that u can change the cursor of that ..
U have two options if u want to keep seprate code then 2nd one is good for u......I hope it will help u ...... -
Cursor hand gone when I hover over Flash buttons.
When I visit a site with Flash interactivity the hand cursor does not appear. It works when clicked and this problem is only in this browser.
Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]
Your above posted system details show multiple Java Console extensions.<br />
You can uninstall and remove Java Console extensions, you do not need them to run Java applets.
See http://kb.mozillazine.org/Java#Multiple_Java_Console_extensions -
Is there a way to change the 'cursor' so that it is always a 'hand' or something else that is easier to see - this is for one of the users that I support. They're looking for the cursor to always be this way, no matter what (ever, regardless). I have not been able to find this feature and other Adobe users I have talked to haven't found anything like it either.
Hi, showing some messages when moving over a button can be done by standard-functionality useing property "tooltip-text" for the button.
If you want your own bean start with overwriting the class oracle.forms.ui.VButton, use method with code similar to the following
protected void processMouseEvent(MouseEvent p0)
if ((p0.getID()==MouseEvent.MOUSE_ENTERED) && this.isEnabled())
// Add your code for changing cursor here
super.processMouseEvent(p0);
} else if ((p0.getID()==MouseEvent.MOUSE_EXITED) && this.isEnabled())
// Add your code for changing cursor here
super.processMouseEvent(p0);
} else
super.processMouseEvent(p0);
}hope this helps -
Modifying CSS code to customize a theme
Hello:
I'm trying to change some CSS code to customize a theme for an application. I make my change, upload, and the change takes into effect. I make additional changes, click Apply Changes, and the changes do not take affect.
I then go back to my CSS file, make the additional changes, upload the file, and the changes do not take into effect.
My issue is that some of the time when I make a change to the CSS code, the changes take into effect. Other times, they do not.
I installed Firebug which lets me print the HTML and CSS code for a page that is being currently viewed on the screen. I reviewed the HTML and found the "id" that I want to change. I make my changes, upload the CSS file, and the changes do not take into effect.
What is the secret with the CSS code in these themes that will not take my changes?
Here's an example of what happens:
I change the background color for a table. I then want to change the font-color. Instead of displaying both changes; my page reverts to the original colors of the theme.
I am at a complete loss. I have experience in CSS coding and I just don't understand why these changes aren't working all the time.
Can someone give me some insight as to the secret of customizing these themes?
Thanks,Hi,
You can find your uploaded file in the table APEX_APPLICATION_FILES (or HTMLDB_APPLICATION_FILES in older versions of Apex) - search for your css filename in the FILENAME column.
I tend to upload custom stylesheets through Shared Components, Cascading Style Sheets and then replace the existing LINK tag in the page template with:
<link rel="stylesheet" href="#WORKSPACE_IMAGES#MyThemeFileName.css" type="text/css"/>Then, when I need to change the css, I do so using a text editor, delete the file through Shared Components and add in the new version. Sometimes the browser's cache holds an old copy of the stylesheet, but clearing the cache sorts that out. Otherwise, I've not had any problems doing it this way.
The css files you're seeing in your images folder will be referenced within the page templates. As these may be updated with any upgrade to Apex, you should avoid updating these.
Andy -
Sometimes when moving over an image, mt cursor changes to a hand with a blue magnifying grid. How can I disable this?
Thanks!Thanks sberman ... unfortunately that option is & has been unticked. It has happened to me two or three times but my memory ain't what it used to be so I can't recall the exact circumstances. It went away by itself this morning after an overnight shutdown so I don't think it can be a "preferences" item. Only thing I had to do this morning was to change trackpad batteries. Maybe low batt power was the cause? Interestingly before I posted the query here, I was searching all over the net for a similar problem and could not find even one related post or comment anywhere. And this post has 53 views with only your reply so maybe it is a spurious / unique problem? I'll leave the post for now as the problem seemed to have fixed itself and if it happens again, I will re-try everything first, including checking batteries. Somehow I thought mnaybe I had hit a keyboard shortcut in error but I can't find any reference at all to this kind of behaviour. Wierd!! But thanks very much for your reply!!
-
How can i add css styling to all elements within a symbol.
How can i add css styling to all elements within a symbol.
For instance.
If i have a symbol call "data" and within this i have 4 elements called 1,2,3,4 how do i add styling to all these elements without having to re-write code for each element.
I know i can style a symbol called "data" by :
sym.$("data").css("font-family", "baumans, sans-serif", "font-size", "15px");
...But this does not style the content of the elements 1,2,3 and 4
If i were using standard CSS and HTML then all div's within a div called "data" would be styled the same.
help "my friends of the code"Hi Justin,
1) You have a syntax error here: sym.$("data").css("font-family", "baumans, sans-serif", "font-size", "15px");
sym.$("data").css({ "font-family": "baumans, sans-serif", "font-size": "15px"} ); // correct
sym.$("data").css( "font", "15px baumans, sans-serif" ); //correct
2) Then, loading the jQuery file is not required. You can create a class or change tags.
How to add a class:
Changing tags:
You've got 2 demo files (Edge 5.0) here: class or tag.zip - Box -
Modifying the css of a Symbol on hover
I am trying to change the z-index of a symbol upon hover. This symbol has a number of elements inside of it with their own timeline that triggers upon hover as well. I tried doing so at first through something along the lines of:
sym.getSymbol("mySymbol").css("z-index","10");
This did not work (and it's not the z-index either, I tried changing something basic like border color and it would not do so). However if this were an element as opposed to a symbol, this code would work.
sym.$("myElement").css("z-index","10");
What's confusing to me about this is that if you view the source code of an Edge document, converting a group of elements into a symbol on the HTML side merely throws these elements into a DIV. So why wouldn't you be able to modify the css in the same way you are able to with elements in Edge? Am I doing something wrong? I also tried adding a class name to the symbol, but I am unsure of how to select a css class created through Edge (via the method in the image below).You need to use an integer, not a string:
sym.$("myElement").css("z-index",10);
example
https://app.box.com/s/nx58tk4dcysq1iphnlu5 -
Hi everyone,
I have created a vertical quick link navigation bar. It is setup to change images on hover. I made the entire cell clickable. However, the mouse cursor only changes to the hand when it hovers over the text in the cell. I would like to make the cursor change to the hand when the user hovers over the cell (indicating it is clickable) Here is the code I have.
<td align="center" class="leftnavbtn" onMouseOver="this.className='leftnavbtnover'" onMouseOut="this.className='leftnavbtn'" onClick="document.location='schools.html'"><a href="schools.html">School District</a></td>
What do I need to add to get it to do what I want?
Thanks
ChrisUse CSS instead of Javascript:
http://www.dreamweaverresources.com/tutorials/clickable_cell.htm -
Changing frames within a symbol
Can anyone tell me how to change frames within a symbol, by using a button in the actuall stage. Every time I try searching for it, I get lost in half compleated answers, action script 2, and things that throw a ton of code and words and stuff at me, but never explain the parts of it. (Often also has losts of additional code that I probally don't need)
I've got the button, but I need the function.I can see from your other posts you are familiar with coding a button, so... In your button event handler function you would use something like...
symbolName.gotoAndStop(someFrame);
where symbolName is whatever instance name you assign to the movieclip symbol and someFrame is either a number or a label for the frame you want to change to. -
i want to change cursor to hourglass when a new servlet is loading. working of my program is that on click of submit,the present servlet unloads and a new servlet is loaded.this new servlet takes time. so i can't write the code in prevoius servlet for cursor and the new servlet which is being loaded changes cursor to hourglass only after fully loading. please help me in this regard
Write the javascript, flush the output stream, and the hourglass should be shown right away...
note: You should write some stuff before the javascript -- send some text maybe the top of the output page. IE has some internal buffer you have to fill up before server-side flushing works.
Again: You should make sure you send the javascript and flush before you start processing.
Also: You will not be able to do a send redirect if you use this approach. If this is not satisfactory, you could try using one of the "Please Wait" mechanisms described on this site (use the forum or google search for JSP "Please Wait" to find them) to do the job. -
Preview css code without html??
I am learning CSS and very slowly.
I would like to know if there is any way that I can "see" if my css code is working the way I want it to.
Since there is no display in CSS , only html, I'm guessing I have to link the CSS to the html in order to see
if the CSS code is working the way I want.
Is there an easier way to "try out" css code?
Perhaps another way to get it to display without linking it to an html file?
Maybe there is another program that will let one "view" css code?
Maybe something online that will do this?
I really could use something like this.
Otherwise, can someone tell me, in the most basic, simple terms, how I can link my Css code page
to an html page, so i can preview if my CSS code is doing what it's supposed to?
thanks!!!!!I hope this makes sense. thanks again!
Not really. I don't understand the workflow you're attempting.
CSS formats HTML pages. I link one external CSS stylesheet to all my HTML pages then tweak the CSS in the external CSS file and "see" the results of my tweaks on the HTML page I'm actually formatting.
In other words, I preview my changes on the HTML page which is actually linked to the CSS stylesheet.
You seem to be wanting to set up your CSS in isolation to your HTML page then, when you've got it right, you want to apply the CSS to the actual HTML page.
Am I missing something?
These are some of the ways I think might work:
<td><span style=”background-color:yellow”>Breakfast</span>..</td>
<td style=”background-color:yellow”>Breakfast</span>...</td>
<td><span style=”bgcolor:yellow”>Breakfast</span>..</td>
<td><span style=”color:yellow”>Breakfast</span>..</td>
but I need to try them all to see which is the one that will give me the desired result (highlight the word Breakfast in yellow).
You've lost me here I'm afraid. Why not let DW do the coding for you?
e.g. <span style=”bgcolor:yellow”> is invalid CSS code. DW will code it for you.
Avoid inline styles <td style=”background-color:yellow”> and <span>s wherever possible. Use them in an emergency only when no other option exists. Otherwise, every time you tweak a color, you have to update every single affected <td> and <span> tag which defeats the reason for using CSS in the first place.
CSS can be applied in several ways. In order of preference:
1) External, linked styesheet (preferred option every time)
2) Embedded stylesheet (rules grouped into the <head> section of a HTML page)
3) Inline styles (CSS inline with the HTML code scattered throughout the page) - emergencies only or where no other options exist such as HTML email formatting
You're starting with option 3) and making life hard for yourself.
It's more powerful and efficient to define a CSS class for a highlighted table cell - in an external stylesheet which is linked to the HTML page:
e.g.
Separate CSS file
td.highlight {
background-color: yellow;
HTML (with CSS file linked to it)
<td class="highlight">Breakfast</td>
You can do this for all highlighted <td>s on all HTML pages on your website - be it one or 1000.
Later, if you want to change yellow to green, you change the CSS rule in the external CSS stylesheet (you don't have to touch the HTML file at all):
td.highlight {
background-color: green;
upload that one tiny stylesheet file to the server and your entire website (all 1000 pages) is instantly updated. -
How to apply html css code in ADF pages
I have the css code for all html components like buttons , text box, tabs etcc.. I want same look and feel in adf, I want to apply same css in ADF pages without/with minimal changes,
I need very urgently,
plz do needful ASAP.
Thanks & Regards,
Ram.Hi..
Also this will helpful
http://technology.amis.nl/blog/5722/using-adf-faces-11g-skinning-for-setting-the-styles-of-specific-component-instances-or-groups-of-instances -
CSS code completely fouled up by CSS designer
I'm having a bunch of bugs with Dreamewaver CC. Inserting images in code view or in design view always places them in the wrong place. For example inserting an image using Cmnd/Ctrl + Alt/Option + i with the cursor placed before paragraph 1 will insert the image after the last paragraph in the document or some other random place in the page. The only thing that kind of works is that the insert stays in the right div.
That's not the worst of it. I made a few edits to a fluid layout using the new CSS design panel and all of the line feeds and line breaks have dissapeared making the code extremely hard to read, troubleshoot and edit. Has anyone seen this?
Here's what the code looks like now:
@charset "UTF-8";
/* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */
img, object, embed, video { max-width: 95%; margin-left: auto; margin-right: auto; display: block;}/* IE 6 does not support max-width so default to width 100% */.ie6 img { width:100%; }/* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 4;dw-num-cols-tablet: 8;dw-num-cols-desktop: 14;dw-gutter-percentage: 15;Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/*/body { background:#333; }.fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; }.fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 96.7391%; padding-left: 1.6304%; padding-right: 1.6304%; clear: none; float: none;}#mainHeader { width: 100%; border-bottom: thin dotted #666666; background-color: #FFFFFF;} #headerHome { width: 100%; margin-left: 0; } #mainTitle { width: 100%; margin-left: 0; clear: both; display: none; }#mainNav { width: 100%; clear: both; margin-left: 0; }#mainNavList { width: 100%; margin-left: 0; }.manNavBtn { width: 48.3146%; clear: none; margin-left: 3.3707%; }#sideNav { width: 100%; background-color: #FFFFFF; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;}#mainArticle {
width: 100%;
clear: both;
background-color: #FFFFFF;
}#adSide { width: 100%; clear: both; margin-left: 0; background-color: #FFFFFF;}# mainFooter {}#footer {}.zeroMargin_mobile {margin-left: 0; }.hide_mobile {display: none; }/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */@media only screen and (min-width: 481px) {.gridContainer { width: 93.451%; padding-left: 0.7744%; padding-right: 0.7744%; clear: none; float: none; margin-left: auto; }# div1 {}#mainHeader { width: 100%; border-bottom: thin dotted #666666; }#headerHome {width: 36.464%; margin-left: 0; }#mainTitle {width: 61.8784%; clear: none; margin-left: 1.6574%; display: block; }#mainNav { width: 61.8784%; margin-left: 1.6574%; clear: none; float: right; }#mainNavList {width: 100%; margin-left: 0; }.manNavBtn {width: 17.8571%; margin-left: 2.6785%; clear: none; }#sideNav {width: 11.0497%; }#mainArticle {width: 61.8784%; margin-left: 1.6574%; clear: none; }#adSide {width: 23.7569%; margin-left: 1.6574%; clear: none; }#mainFooter {}#footer {}.hide_tablet {display: none; }.zeroMargin_tablet {margin-left: 0; }}/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */@media only screen and (min-width: 769px) {.gridContainer { width: 94.1149%; max-width: 1000px; padding-left: 0.4425%; padding-right: 0.4425%; margin: auto; clear: none; float: none; margin-left: auto; }#div1 {}#mainHeader {width: 100%; }#headerHome {width: 20.6896%; margin-left: 0; }#mainTitle {width: 78.3699%; clear: none; margin-left: 0.9404%; display: block; }#mainNav { width: 78.3699%; clear: none; margin-left: 0.9404%; float: right; }#mainNavList {width: 100%; margin-left: 0; }.manNavBtn {width: 17.2%; clear: none; margin-left: 1.2%; }#sideNav {width: 20.6896%; }#mainArticle {width: 49.5297%; clear: none; margin-left: 0.9404%; }#adSide {width: 27.8996%; clear: none; margin-left: 0.9404%; }#mainFooter {}#footer {}.zeroMargin_desktop {margin-left: 0; }.hide_desktop {display: none; }}#mainArticle img { border: thin solid #333333; border-radius: 6px; -webkit-box-shadow: 0px 0px; box-shadow: 0px 0px; padding: 5px 5px 8px; background-color: #E9E9E9;}
Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
Mac, OSX 10.8.4, Dreamweaver 13.0 Build 6391
NOTE: If I use something like Styleneat to clean up this code it seems to break the styles for the Mobile and Tablet layouts and causes Dreamweaver to crash every time I turn on or off the fluid grid layout display.Does anyone have any ideas about how to fix this and turn it back into readable code without going through each line and looking for natural breaks?
What a mess.
mg, object, embed, video { max-width : 95%;
margin-left : auto;
margin-right : auto;
display : block;
.ie6 img {
width : 100%;
body {
background : #333;
.fluid {
clear : both;
margin-left : 0;
width : 100%;
float : left;
display : block;
.fluidList {
list-style : none;
list-style-image : none;
margin : 0;
padding : 0;
.gridContainer {
margin-left : auto;
margin-right : auto;
width : 96.7391%;
padding-left : 1.6304%;
padding-right : 1.6304%;
clear : none;
float : none;
#mainHeader {
width : 100%;
border-bottom : thin dotted #666666;
background-color : #FFFFFF;
#headerHome {
width : 100%;
margin-left : 0;
#mainTitle {
width : 100%;
margin-left : 0;
clear : both;
display : none;
#mainNav {
width : 100%;
clear : both;
margin-left : 0;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 48.3146%;
clear : none;
margin-left : 3.3707%;
#sideNav {
width : 100%;
background-color : #FFFFFF;
border-bottom-right-radius : 4px;
border-bottom-left-radius : 4px;
#mainArticle {
width : 100%;
clear : both;
background-color : #FFFFFF;
.zeroMargin_mobile {
margin-left : 0;
.hide_mobile {
display : none;
@media only screen and (min-width:481px) {
#mainHeader { width : 100%;
border-bottom : thin dotted #666666;
#headerHome {
width : 36.464%;
margin-left : 0;
#mainTitle {
width : 61.8784%;
clear : none;
margin-left : 1.6574%;
display : block;
#mainNav {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.8571%;
margin-left : 2.6785%;
clear : none;
#sideNav {
width : 11.0497%;
#mainArticle {
width : 61.8784%;
margin-left : 1.6574%;
clear : none;
#adSide {
width : 23.7569%;
margin-left : 1.6574%;
clear : none;
.hide_tablet {
display : none;
.zeroMargin_tablet {
margin-left : 0;
@media only screen and (min-width:769px) {
.gridContainer { width : 94.1149%;
max-width : 1000px;
padding-left : 0.4425%;
padding-right : 0.4425%;
margin : auto;
clear : none;
float : none;
margin-left : auto;
#mainHeader {
width : 100%;
#headerHome {
width : 20.6896%;
margin-left : 0;
#mainTitle {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
display : block;
#mainNav {
width : 78.3699%;
clear : none;
margin-left : 0.9404%;
float : right;
#mainNavList {
width : 100%;
margin-left : 0;
.manNavBtn {
width : 17.2%;
clear : none;
margin-left : 1.2%;
#sideNav {
width : 20.6896%;
#mainArticle {
width : 49.5297%;
clear : none;
margin-left : 0.9404%;
#adSide {
width : 27.8996%;
clear : none;
margin-left : 0.9404%;
.zeroMargin_desktop {
margin-left : 0;
.hide_desktop {
display : none;
#mainArticle img { border : #333333 solid thin;
border-radius : 6px;
box-shadow : 0 0;
padding : 5px 5px 8px;
background-color : #E9E9E9; -
WAd Report - How to change Cursor Type...
Hi,
In BI WAD report output, the cursor type is Pointer (Hand sign). I wanted to change it to some other type, is this possible, If yes, could u pls let how can i do that. I tried a lot but didn't suceed.
Thanks...I think this would be possible by having custom CSS embedded in web template. E.g. see here:
http://www.zimmertech.com/tutorials/css/20/changing-cursors-tutorial.php
Maybe you are looking for
-
I have been using Itunes for at least 5 years and I have never had a problem with it. I recently bought a $25.00 Itunes giftcard and last night I redeemed it. When I get on my itunes account it says that I have $25.12. However, when I go to buy a son
-
HT4623 Ios7 download setup froze my Mac mini on "Choose a Wi-Fi network"!
Help! I clicked Ios7 download, the bar went across the page, and it seemed to be loaded. But then it asked me to select a wireless network, when I entered the name of my network, it froze up, greyed out all but the name I typed and just sat there.
-
[solved] pacman -Syu made my rxvt-unicode pink
nothing against those who likes their terminal looking like Barbie's Dream House, but I'm baffled. I did a pacman -Syu, shutdown, installed a 1TB drive, booted back up and now my urxvt background is bright pink. This is my .Xdefaults. URxvt*termName
-
How the (bleep) do you get the (bleep, bleep) Encore Chapters Markers set in Premiere to actually show up in Encore?! None of the standard methods are working.
-
Hi, Can anybody help me to find the incoming DB-Links to my database from other databases. Satish null