Jump to content


Photo
- - - - -

Rollover Effect for Images (HTM File Format)

rollover HTML Xara Magix

Best Answer Rob , 12 June 2013 - 10:00 AM

Hi,

 

Let me give you some examples of much easier rollover management than trying to convert antiquated HTM and outdated javascript (which likely won't work well) to WordPress.  WordPress loads specific Javascript and jQuery, and code from third-party programs not part of WordPress can (and likely would) cause conflicts potentially corrupting your site. 

 

The link below is one example of a hover effect based on rolling over a normally visible image, seeing a different image on hover.  The code can be used in any page or post for testing. Copy and paste it into the Text Mode of the page or post used for testing.

 
<div class="mynewicons">
<div id="connect-pinterest" class="sbconnecticon"><a href="https://pinterest.com/XXXX/"></a></div>
</div>

Please note that the XXXX represents the hidden proper link to Pinterest in the original.   The word PRIVATE (in caps) below represents the domain.  In any case, the links may be changed as desired. The link is solely for demonstration purposes. You can replace those for your own testing. No link to pinterest or any other place is needed. Just replace it in  the code above, with # for a link that goes nowhere.

 

Here's an example of the corresponding CSS used:

 
#connect-pinterest {
   background: url("http://www.PRIVATE.com/wp-content/uploads/2013/01/pinterest.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

#connect-pinterest:hover {
   background: url("http://www.PRIVATE.com/wp-content/uploads/2013/01/pinterest_rollover.png") no-repeat scroll 0 0 transparent;
   height: 43px;
   width: 43px;
}

As you can see, the ID in the HTML for Pinterest matches the CSS here.

 

The CSS contains two parts.  One is the default - the one people see normally (top group) and next is the a:hover group (lower), which contains the image link for the rollover. 

 

This code would be placed in Dashboard > PageLines > Site Options > Custom Code anywhere under body {}.

 

It can be repeated and modified, changing the ID for each pairing.  The sizes of the hover image can be changed to show an expanded image (larger than the basic one).
 

To test, just replace the image links with images you've created and adjust the size to match.

 

This system works much better than anything from a third-party, and is tested to work in both WordPress and PageLines without conflicts.

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 10 June 2013 - 04:09 PM

Hello,

 

I have not posted on this forum before but have used it multiple times for help. Thank you guys for all the guidance you have indirectly given me!

 

I use Pagelines as a simple alternative to other services; I use mostly the basic features (I don't mess with CSS or PHP). I am using the most up-to-date versions of Pagelines and Wordpress (2.4.3 and 3.5.1). "The Events Calendar" and "WP Super Cache" are the only plugins active on my site.

 

The other day, I created an image with a rollover effect using Xara Photo and Graphic Designer 2013. (Once rolled over with the pointer, the images turned from black and white to color and "popped out," growing in size.) Upon completion of the project, the rollover effect didn't work if I exported the image as just a JPEG, PNG, or GIF, so I exported it using the "Export Website" feature. If I open the file in my documents, Firefox loads the image and displays it perfectly with the rollover effect. The images used are JPEGs, but the file format (with the rollover effect) is an HTM file. Unfortunately, I have not found a way to easily integrate this file-type image into one of my pages.

 

If my explanation is ambiguous, please see the video tutorial I used for the rollover image, located

Please Login or Register to see this Hidden Content

This may give you a better idea as to what I am describing.

 

My questions are these:

  • Is it possible to integrate an HTM graphic into a page (using Pagelines as the framework)? Am I missing something... plugins, etc?
  • If it's not possible, can you suggest another way to make graphics have a rollover, "pop-out" effect?

Thanks again!

 



#2 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2380 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 June 2013 - 06:16 PM

Have you tried to add the Contenbox functionality to your site from the store (

Please Login or Register to see this Hidden Content

)

 

You can take the code from the HTML file (.htm) and use this in your content box. providing you are linking to the images correctly (if hosted on your own site or elsewhere) this should work. 



#3 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 10 June 2013 - 07:54 PM

Thanks- it seems I am halfway there.

 

I have uploaded the associated files under my FTP. But when I put the HTML code into the Content Box, how does it know where to take the files from? As it is now, all of the files are interconnected locally on my computer. So, how do I specify the new internet locations of the images, Javascript, etc in the HTML script?



#4 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 June 2013 - 08:49 PM

Hi there, you can paste your html directly into the contentbox, you'll just need to make sure the urls in the html correspond to the correct path of where you've saved the files. So when you uploaded your files into a folder on your hosting account, they'll be a url path to those files,  something like

Please Login or Register to see this Hidden Content

.



#5 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 11 June 2013 - 02:34 AM

Now the links are correct and everything is where it should be (90% done). The bottom layer image (mouse-off) shows up when the website loads; however, the top layer (mouse-on) will not display. Oddly enough, all of the necessary images show up under Firefox's "View Image Info." (It just seems the mouseover effect is not working.)

 

Since everything (HTML-wise) is pointing to the right location, why isn't the mouseover effect working? Does the Javascript link need to be put somewhere else? Could there be an issue with Contentbox?

 

I really appreciate your assistance!



#6 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2380 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 11 June 2013 - 07:41 AM

sorry if i have missed this above but please can you provide a link to your site please. 



#7 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 11 June 2013 - 04:06 PM

Sent you the link via PM.

 

As you can see on the home page, besides being off center and changing the font of the page when inserted, the images are lacking the rollover effect.

 

Thanks!



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 June 2013 - 07:00 PM

Hi,

 

Most likely, the htm file contains the basic HTML for the image tag with a custom class, and some style that enables the effect.

CSS would be the way to go with this without the htm. Can you paste the htm's contents (the code) into

Please Login or Register to see this Hidden Content



#9 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 12 June 2013 - 01:51 AM

Alright, I PM'd you the link. This is the HTML before I redirected the online file locations, right after XARA rendered it.

 

Again, I really appreciate you guys! The Pagelines community is so supportive!



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 June 2013 - 10:00 AM   Best Answer

Hi,

 

Let me give you some examples of much easier rollover management than trying to convert antiquated HTM and outdated javascript (which likely won't work well) to WordPress.  WordPress loads specific Javascript and jQuery, and code from third-party programs not part of WordPress can (and likely would) cause conflicts potentially corrupting your site. 

 

The link below is one example of a hover effect based on rolling over a normally visible image, seeing a different image on hover.  The code can be used in any page or post for testing. Copy and paste it into the Text Mode of the page or post used for testing.

Please Login or Register to see this Hidden Content

Please note that the XXXX represents the hidden proper link to Pinterest in the original.   The word PRIVATE (in caps) below represents the domain.  In any case, the links may be changed as desired. The link is solely for demonstration purposes. You can replace those for your own testing. No link to pinterest or any other place is needed. Just replace it in  the code above, with # for a link that goes nowhere.

 

Here's an example of the corresponding CSS used:

Please Login or Register to see this Hidden Content

As you can see, the ID in the HTML for Pinterest matches the CSS here.

 

The CSS contains two parts.  One is the default - the one people see normally (top group) and next is the a:hover group (lower), which contains the image link for the rollover. 

 

This code would be placed in Dashboard > PageLines > Site Options > Custom Code anywhere under body {}.

 

It can be repeated and modified, changing the ID for each pairing.  The sizes of the hover image can be changed to show an expanded image (larger than the basic one).
 

To test, just replace the image links with images you've created and adjust the size to match.

 

This system works much better than anything from a third-party, and is tested to work in both WordPress and PageLines without conflicts.


  • batman likes this

#11 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 13 June 2013 - 02:20 AM

Finally, it works! GENIUS! Thank you so much!

 

LAST QUESTION: For the <Div id, <Div class, and #(connect-pinterest)... codes that you listed, does it matter what I set those values to? For example, could I set "class="sbconnecticon"" to maybe "class="picture1""...?

 

Thanks again!!!



#12 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 June 2013 - 08:06 PM

Hi there, the Div id and class will need to match the code entered into the html for the css to take affect.



#13 hawk29

hawk29

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 15 June 2013 - 12:49 AM

It works now... I really appreciate all of your help!!



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 15 June 2013 - 01:27 PM

Great!



#15 kate1000

kate1000

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 10 December 2013 - 08:28 PM

Thank YOu!!

I have used your guide..as best as I think i could and am very pleased .. now to make practial use of it for before and after photoshop images for people to see my work:

 

2 questoins:

1. how can these images work in rows witiin the bootstrap grid ? div4 to be exact- so that they are responsive in size

2. If I change the image size in the css portion of the code.. it does not scale the image but rather starts from the top right corner and shows just taht much -rather than scaling image.

 

I am structuring the images in

class=span4 divs

but they overlap on screen the right over the left

Please Login or Register to see this Hidden Content

 

my html -

 

<div class="row">
<div class="span4">
<div id="rollover">
<a href="

Please Login or Register to see this Hidden Content


</div>
<div class="span4">
<div id="rollover">
<a href="

Please Login or Register to see this Hidden Content


</div></div>

 

I gave percentage in the css a whirl but it makes the  images vanish.

 

how can I get the images to behave size and responsively in the div space ?

css - in pagelines customize plug in

#connect-pinterest {
   background: url("

Please Login or Register to see this Hidden Content

") no-repeat scroll 0 0 transparent;
   height: 240px;
   width: 360px;
}

#connect-pinterest:hover {
   background: url("

Please Login or Register to see this Hidden Content

") no-repeat scroll 0 0 transparent;
   height: 240px;
   width: 360px;
}
/* ======== test ============= */
#rollover {
   background: url("

Please Login or Register to see this Hidden Content

") no-repeat scroll 0 0 transparent;
   height: 240px;
   width: 360px;
}

#rollover:hover {
   background: url("

Please Login or Register to see this Hidden Content

") no-repeat scroll 0 0 transparent;
   height: 240px;
   width: 360px;
}