collapse collapse

* Archive Notice

This is an Archive Forum.

The content in this forum may be out-of-date or have been superseded by newer information, and links in forum pages to other sites may not work. This forum contains archives for future reference.

Visit our thread at Simple Machines Forum for current support.

* User Info

 
 
Welcome, Guest. Please login or register.

* Who's Online

  • Dot Guests: 155
  • Dot Hidden: 0
  • Dot Users: 0

There aren't any users online.

* Shoutbox

Refresh History
  • Shoutbox is not for support!
  • {OCS}MasterSeal: Yup, Still adore SP
    April 21, 2019, 07:08:06 PM
  • {OCS}MasterSeal: STILL love SP :)
    November 24, 2018, 05:05:50 AM
  • ♦ Ninja ZX-10RR ♦: <3 aegersz
    September 13, 2018, 03:36:09 PM
  • aegersz: I STILL <3 LOVE SimplePortal
    September 13, 2018, 07:11:39 AM
  • aegersz: o LOVE you guys - Simple Portal rocks !
    May 09, 2018, 05:18:59 AM
  • Chen Zhen: our apologies for the site being down.. please read server issues topic
    March 22, 2018, 05:32:38 AM
  • {OCS}MasterSeal: LOL PLEASE forget I just posted that. I found the answer in my own dang post back in 2015. lol sorry!
    July 04, 2017, 10:47:55 PM
  • {OCS}MasterSeal: I know this SB isnt' for support, but I just have a general question. Who would I contact to find out where SP stores its block info? Is it DB driven or files? I searched the site but came up with nothing. probably my fault any insight is appreciated.
    July 04, 2017, 10:43:36 PM
  • ♦ Ninja ZX-10RR ♦: Excuse me but what does Simpleportal have to deal with that?
    February 05, 2017, 08:21:14 PM
  • WhiteEagle: of course IMHO that site appears to be dead :(
    February 04, 2017, 01:08:05 PM
  • WhiteEagle: If I can get that, then I'll use it for that site...
    February 04, 2017, 01:07:35 PM
  • WhiteEagle: decided to not use SMF for any projects, unless I can get a copy of the premium version of the fanfiction archive plugin
    February 04, 2017, 01:06:54 PM
  • expertdecisions: cloudflare
    January 28, 2017, 08:01:47 AM
  • aegersz: SM release 2.0.13 !
    January 12, 2017, 06:00:13 AM
  • raffo: Tks Emanuele, even if I didn't understand the fix :D
    November 07, 2016, 02:01:20 AM
  • emanuele: [link]
    November 01, 2016, 12:43:50 PM
  • emanuele: raffo: the English support board is a good place. ;)
    November 01, 2016, 12:43:38 PM
  • raffo: Where can I find the fix for the shoutbox?
    November 01, 2016, 05:06:09 AM
  • {OCS}MasterSeal: To the SP team, I make a point to come here and thank you as much as possible for your work.  so again, THANK YOU!
    October 28, 2016, 10:38:05 AM
  • emanuele: That's indeed funny, the limit is present only in the patch and not the full install.
    October 22, 2016, 06:14:58 PM

* Recent Posts

Adding Forums Button to Nav bar by jirapon
[August 01, 2019, 09:07:12 AM]


Re: Board Icons by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 04:03:41 PM]


MOVED: Czech translation???? by ♦ Ninja ZX-10RR ♦
[July 30, 2019, 03:04:51 PM]


Board Icons by jirapon
[July 30, 2019, 07:28:44 AM]


Re: Thankyou Simpleportal, by ♦ Ninja ZX-10RR ♦
[July 29, 2019, 09:41:29 AM]

If you're interested in helping other members with support requests, consider joining the Community Support Helpers group.

Author Topic: Block with ROLLOVER image help, please. =)  (Read 5052 times)

0 Members and 1 Guest are viewing this topic.

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Block with ROLLOVER image help, please. =)
« 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]
« Last Edit: January 07, 2015, 04:49:32 PM by SMiller »

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Block with ROLLOVER IMAGE help, please. =)
« Reply #1 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.

Offline naozumi

  • Semi Newbie
  • *
  • Posts: 5
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Block with ROLLOVER image help, please. =)
« Reply #2 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.

Offline SMiller

  • Semi Newbie
  • *
  • Posts: 21
  • SMF Version: 2.0.9
  • SP Version: 2.3.6
Re: Block with ROLLOVER image help, please. =)
« Reply #3 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
« Last Edit: January 28, 2015, 11:19:39 PM by SMiller »

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Block with image hovers help, please. =)
« Reply #4 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;




« Last Edit: March 24, 2016, 06:21:22 AM by ♦ Ninja ZX-10RR ♦ »

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Block with ROLLOVER image help, please. =)
« Reply #5 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;
}
« Last Edit: March 24, 2016, 06:21:43 AM by ♦ Ninja ZX-10RR ♦ »

Offline ♦ Ninja ZX-10RR ♦

  • Spammer Hammer
  • Support
  • *
  • Posts: 1193
  • Gender: Male
  • Sniper Legends
    • Virtual Interactive Games Entertainment™
  • SMF Version: 2.0.13
  • SP Version: 2.3.6
  • Elkarte Version: 1.0.6
Re: Block with ROLLOVER image help, please. =)
« Reply #6 on: March 24, 2016, 06:20:48 AM »
Please, again, use code tags ;)
Have you tried SimplePortal Documentation before asking? ;)
F.A.Q.  English Support  |  Blocks Support
Fancy Feature idea ?!  |  Blocks Requests
Themes & Graphics

▼ My job! ▼

No PMs for support unless it's a paid request. Thank you! :)
#OpIsis

Offline swoodie

  • Jr. Member
  • **
  • Posts: 63
  • Gender: Male
Re: Block with ROLLOVER image help, please. =)
« Reply #7 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;



}

« Last Edit: March 29, 2016, 06:59:05 AM by swoodie »