SimplePortal

Customization => Blocks and Modifications => Block Requests => Topic started by: SMiller on January 04, 2015, 12:59:24 PM

Title: Block with ROLLOVER image help, please. =)
Post by: SMiller on January 04, 2015, 12:59:24 PM
[edit]
I asked my original question all wrong, was confusing. See my reply for the "fixed" question which will make much more sense to y'all!

Thanks again!

[/edit]
Title: Block with ROLLOVER IMAGE help, please. =)
Post by: SMiller on January 07, 2015, 04:47:36 PM
Ok, since I've posted my OP I've figured a few more things out. For one, it's not called hover, it's rollover. I'm sure I'll get better help asking the right question, so here goes:

I can make a rollover image easy enough:
Code: [Select]
<a href="URL ADDRESS"><img src="../News/logo/news-logo.png" onmouseover="this.src='../News/logo/news-logo.0.gif'" onmouseout="this.src='../News/logo/news-logo.png'"/></a>

Easy cheezy.

But what I'm trying to do is a larger image where rollover is different depending on what part of the image you are rolling over (mapped).

I have all the coordinates because I'm moving a header image from Joomla to Simpleportal... I just don't know the right syntax in Simpleportal format. As HTML? As php?

Below is the code as it is in Joomla, with all the relevant coordinates for the image mapping.

Code: [Select]
div#logo {
    position: relative;
    text-align: left;
}
div#logo div#logo_n {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.1.gif");
    height: 50px;
    left: 312px;
    position: absolute;
    top: 25px;
    width: 37px;
}
div#logo a:hover div#logo_n {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.2.gif");
}
div#logo div#logo_e {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.3.gif");
    height: 55px;
    left: 350px;
    position: absolute;
    top: 21px;
    width: 37px;
}
div#logo a:hover div#logo_e {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.4.gif");
}
div#logo div#logo_w {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.5.gif");
    height: 50px;
    left: 388px;
    position: absolute;
    top: 28px;
    width: 49px;
}
div#logo a:hover div#logo_w {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.6.gif");
}
div#logo div#logo_s {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.7.gif");
    height: 51px;
    left: 438px;
    position: absolute;
    top: 28px;
    width: 35px;
}
div#logo a:hover div#logo_s {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.8.gif");
}
div#logo div#logo_j {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.9.gif");
    height: 23px;
    left: 171px;
    position: absolute;
    top: 12px;
    width: 23px;
}
div#logo a:hover div#logo_j {
    background-image: url("../MahjongNews/logo/mahjongnews-logo.10.gif");
}


Any help would be greatly appreciated! Even if the map is all wrong, just getting the syntax fixed would be a huge help.

Any help?

Thanks.
Title: Re: Block with ROLLOVER image help, please. =)
Post by: naozumi on January 28, 2015, 03:39:21 PM
FYI by far an away the quickest way if you have the site still running is to goto it and right click and choose to inspect element. Then you will see all the html code you need. copy all between the div="logo" until the div is closed and you would have the css required for the HTML block.

The above code is CSS which is only for the styling of the HTML. You will also need it and you should either add it to your site's themes or create a new CSS file and have it included by any other themes available to your site.
Title: Re: Block with ROLLOVER image help, please. =)
Post by: SMiller on January 28, 2015, 07:57:49 PM
Hi naozuml,

Thanks for your reply.

I tried your steps as follows:

Since the old site is still up I was able to capture the html between div and /div and paste it into a custom html block, of course correcting image urls to:

Code: [Select]
<div id="logo"><img align="left" src="../forum/MahjongNews/logo/mahjongnews-block.png" alt="mahjongnews logo">
<script language="javascript" type="text/javascript">
// preload images
window.addEvent('domready', function() {
document.myImages = new Asset.images([
'../forum/MahjongNews/logo/mahjongnews-logo.2.gif',
'../forum/MahjongNews/logo/mahjongnews-logo.4.gif',
'../forum/MahjongNews/logo/mahjongnews-logo.6.gif',
'../forum/MahjongNews/logo/mahjongnews-logo.8.gif',
'../forum/MahjongNews/logo/mahjongnews-logo.10.gif',
]);
});
</script>
<a href="#"><div id="logo_j"></div></a>
<a href="#"><div id="logo_n"></div></a>
<a href="#"><div id="logo_e"></div></a>
<a href="#"><div id="logo_w"></div></a>
<a href="#"><div id="logo_s"></div></a>
<br class="clear">
</div>

The mahjongnews.css I added to:
forum/Themes/core/css
and
forum/Themes/default/css

Of course correcting the image urls in the css as well to:

Code: [Select]
div#logo {
height: 142px;
}

/*
** Logo
*/

div#logo {
    position: relative;
    text-align: left;
}
div#logo div#logo_n {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.1.gif");
    height: 50px;
    left: 312px;
    position: absolute;
    top: 25px;
    width: 37px;
}
div#logo a:hover div#logo_n {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.2.gif");
}
div#logo div#logo_e {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.3.gif");
    height: 55px;
    left: 350px;
    position: absolute;
    top: 21px;
    width: 37px;
}
div#logo a:hover div#logo_e {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.4.gif");
}
div#logo div#logo_w {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.5.gif");
    height: 50px;
    left: 388px;
    position: absolute;
    top: 28px;
    width: 49px;
}
div#logo a:hover div#logo_w {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.6.gif");
}
div#logo div#logo_s {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.7.gif");
    height: 51px;
    left: 438px;
    position: absolute;
    top: 28px;
    width: 35px;
}
div#logo a:hover div#logo_s {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.8.gif");
}
div#logo div#logo_j {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.9.gif");
    height: 23px;
    left: 171px;
    position: absolute;
    top: 12px;
    width: 23px;
}
div#logo a:hover div#logo_j {
    background-image: url("http://mahjong.us.com/forum/MahjongNews/logo/mahjongnews-logo.10.gif");
}


As it is, it loads the background image just fine, but has no hover activity.

Am I close? AmIdoinitirght?

MUCH obliged!

 :D
Title: Re: Block with image hovers help, please. =)
Post by: swoodie on March 24, 2016, 02:04:35 AM
i have image in a block & once you hover over it image pops out a bit then back in what i am trying to do is have 4 images in the block that will do that with links, i think i am half way there may be, but i can't get more then one image in block & have to keep image small  or it goes left & can't see all of image

the place i pulled the style.cc from is http://designshack.net/tutorialexamples/imagehovers/index.html

code i used  in block

Code: [Select]
<link rel="stylesheet" href="../grow-image/style.css" type="text/css" media="screen" />


<h2 style="text-align: left;"><p><span style="color: #990000
;">Spinner Baits</h2></span></span></p>
<p>

<div class="grow pic">
<left><object<p><img src="/blocks/spinnerbaits.jpg"
width="130" height="65" border="1" style="border:1px solid black;" alt="Big Reels" </object></left>
<p><div class="grow pic">
<font color="black"><font size="1">
Tackle Review <p>
 
<p> Fishing .<p>
</font></p>

<A href="http://www.info/">Read More >> </A>


<div class="grow pic">
 



css file code i used

Code: [Select]
Add the following CSS:
.grow img{
transition: 1s ease;
}
.grow img:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 1s ease;
}











}
.grow img {
  height: 250px;
  width: 500px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;




Title: Re: Block with ROLLOVER image help, please. =)
Post by: swoodie on March 24, 2016, 06:10:55 AM
maybe i need to use this in my css file to get affect but still want to have more them one image side by side



Code: [Select]
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}
Title: Re: Block with ROLLOVER image help, please. =)
Post by: ♦ Ninja ZX-10RR ♦ on March 24, 2016, 06:20:48 AM
Please, again, use code tags ;)
Title: Re: Block with ROLLOVER image help, please. =)
Post by: swoodie on March 29, 2016, 06:53:41 AM
well i can't work it out how to have the 3 images across with text underneath each individual image & have a link to read more,  do i have to makes div's for each image & text or some type of grid in the block ???

u can see how i have it looking here ausfishing.info


i am trying to get the same affect as this site has hover over images http://daiwafishing.com.au/

block code i put in for images & point to css


Code: [Select]
<link rel="stylesheet" href="../grow-image/style1.css" type="text/css" media="screen" />



<div class="grow pic">
<img  src="grow-image/images/Ranger Plasma Red.JPG"1" style="border:1px solid black;" alt="Big game Marlin Lures" </object>

<img src="grow-image/images/bream.jpg"1" style="border:1px solid black;" alt="Big game Marlin Lures" </object></center>


<img src="grow-image/images/tackle.jpg" border="1" style="border:1px solid black;" alt="Big game Marlin Lures" </object></center>


<h2 style="text-align: center;"><p><span style="color: #990000
;">Game

<p>
<font color="black"><font size="1">
Techniques on how to use Marlin Lures when targeting (Marlin ) <p>
 
<p>To get the very best out of your lures you should tend to troll, In simple terms, the head shape, weight and size will determine how the lure will troll.<p>
</font></p>

<A href="http://www.ausfishing.info/">Read More >> </A>

</div>


 




.css code i used to zoom the images

Code: [Select]

/*GROW*/
.grow img {
  height: 180px;
  width: 180px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.grow img:hover {
  width: 200px;
  height: 200px;



}

SimplePortal 2.3.8 © 2008-2024, SimplePortal