SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Post Making Rollover Effects on top of Font Effect function

    Hello everyone,

    I have a question today about making a rollover effect on top of the jQuery Font Effect plugin, like change the gradient color in this Anchor Tag. The code in my JavaScript looks like this.

    Code:
    <script type="text/javascript">
    $('#realmaturesingles').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    $('#seniorpeoplemeet').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    How can I make a change to this using onmouseover html trigger? I need a function that would change the mirrorColor and color contained in the CSS styles for #seniorpeoplemeet and #realmaturesingles.

  2. #2
    SitePoint Zealot Gar onn's Avatar
    Join Date
    Feb 2011
    Location
    Belgium
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look at the docs of jQuery for the .hover( ) method

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I find this response to be not very helpful.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is my best attempt:

    Code:
    <script type="text/javascript">
    $('#seniorpeoplemeet').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    
    $('#realmaturesingles').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     })
    
    function seniorPeopleMeetInitial()
    {
    	$('#seniorpeoplemeet').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     		})
    }
    
    function realMatureSinglesInitial()
    {
    	$('#realmaturesingles').FontEffect({
    		gradient:true,
    		mirror:true,
    		mirrorColor:"#CCC"
     	})
    }
    
    function seniorPeopleMeetChange()
    {
    	$(this).find("#seniorpeoplemeet").css('color', '#666');
    }
    
    function realMatureSinglesChange()
    {
    	$(this).find("#realmaturesingles").css("color", '#666');
    }
    
    $("#realmaturesingles").hover(realMatureSinglesChange(), realMatureSinglesInitial());
    $("#seniorpeoplemeet").hover(seniorPeopleMeetChange(), seniorPeopleMeetInitial());
    </script>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •