The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Scrolling images design

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Scrolling images design

Post by Guest on May 14th 2013, 6:25 pm

Hey

I was looking for a code for scrolling images, so far I have only come across simple codes which just scroll, I would like text you could hover over to bring up the picture an example of this is on this website: http://www.footlocker.com/

If there is anything like this on forumotion please redirect me or help me out Smile

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 14th 2013, 6:45 pm

Forumotion has a fully functional JavaScript panel, if you tell me what exactly you want, I could try to come up with some code for you.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 14th 2013, 6:57 pm

Could you replicate something similar to what footlocker has in the link on the OP, I was looking to have 10 links to pictures

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Guest on May 14th 2013, 10:03 pm

bump

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by SLGray on May 14th 2013, 10:59 pm

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36748
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: Scrolling images design

Post by Guest on May 15th 2013, 9:07 pm

Is there anyone else able to help out with this

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 15th 2013, 9:14 pm

I see what you mean.

You want it to be like there that selecting one button causes the whole thing to slide and hovering over the images causes the images to change?

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 15th 2013, 9:21 pm

yup, hovering over the button causes the images to slide to the corresponding image and the buttons and images should link to a page
exactly how it functions on footlocker

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 15th 2013, 9:32 pm

I would know how to make images change when hovering over them, but the sliding mechanism is... well, I could copy the code, but that's not your aim, at least it's not mine and I wouldn't do it.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 15th 2013, 9:42 pm

there is no point copying the code lol, I dont mind not have the sliding mechanism as long as the links work, I can try to add the sliding feature later

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 15th 2013, 10:39 pm

You could try to add this in your HTML page.

Code:
<script>(new Image()).src = "your image URL here";</script>
<img src="your original image URL here" onmouseover="this.src='image URL you specified in the script above'" onmouseout="this.src='your original image URL'" />
<!-- your further HTML document -->

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 1:18 pm

Looks nice but it doesnt link to another page, need it to be a hyperlink

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 1:45 pm

Right.

Do this...

Code:
<script>/* script from above */</script>
<a href="your reference link here" target="_blank">
<img ... />
</a>

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 1:50 pm

It didnt work

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 1:52 pm

Replace <img ... /> with the img tag from my first code I gave you, as in... <img src="your original image URL here" onmouseover="this.src='new image URL here'" onmouseout="this.src='original image URL here'" />

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 1:58 pm

I tried doing that, it just created another image on the side but the link i put in is dead

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 1:59 pm

Mind posting what exactly you typed in?

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 2:02 pm

Code:
<script><script>(new Image()).src = "http://i.imgur.com/lqrLPnM.png";</script>
<img src="http://i.imgur.com/iHY1cEl.png" onmouseover="this.src='http://i.imgur.com/lqrLPnM.png'" onmouseout="this.src='http://i.imgur.com/iHY1cEl.png'" />
<!-- your further HTML document --></script>
<a href="http://help.forumotion.com/t123825-scrolling-images-design#824129" target="_blank">
<img src="http://i.imgur.com/iHY1cEl.png" onmouseover="this.src='http://i.imgur.com/lqrLPnM.png'" onmouseout="this.src='http://i.imgur.com/iHY1cEl.png'" />
</a>

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 2:13 pm

Oh, sorry, I was a bit misleading there, I admit.

Use this, instead:

Code:
<script>(new Image()).src = "http://i.imgur.com/lqrLPnM.png";</script>
<a href="http://help.forumotion.com/t123825-" target="_blank">
<img src="http://i.imgur.com/iHY1cEl.png" onmouseover="this.src='http://i.imgur.com/lqrLPnM.png'" onmouseout="this.src='http://i.imgur.com/iHY1cEl.png'" />
</a>

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 2:16 pm

It works, thanks
Is there a way to have the new image appear above the button?

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 2:22 pm

Which button are you refering to, again? It helps if you provide screenshots what you have and what you need Wink

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 2:29 pm


Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 2:31 pm

I'll have a look at it later, I'm currently in school. Expect me to be done in 3-4 hours.

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 2:35 pm



Alright thanks Smile

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by kirk on May 16th 2013, 3:49 pm

what are you trying to do? just a simple mouseover image that is clickable link?

YOUR LINK/URL HERE = The link you want it to click to.

MIAN DIRECT IMAGE HERE = Is your main image.
Be sure to use a direct image link.
That goes in twice.

MOUSE OVER DIRECT IMAGE HERE = Whatever image you want to appear when you mouse over the image. Also be sure to use a direct image link.



Code:

<a href="YOUR LINK/URL HERE" class="postlink" target="_blank" rel="nofollow"><img src="MIAN DIRECT IMAGE HERE" onmouseover="this.src='MOUSE OVER DIRECT IMAGE HERE';" onmouseout="this.src='MAIN DIRECT IMAGE HERE;" /></a>


Example here

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 4:02 pm

Im looking for something similar to what footlocker have (http://www.footlocker.com/), I wanted buttons at the bottom and when you hover over the buttons an corresponding images appears above (banner)


Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Sir Chivas™ on May 16th 2013, 4:03 pm

That will be some kind of slider of images, which has different effects. You can search one in google, mate.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 5:15 pm

I cant find one for forumotion, wow slider is good but you cant use it with forumotion

Guest
Guest


Back to top Go down

Re: Scrolling images design

Post by Ultron's Vision on May 16th 2013, 5:44 pm

You can try testing this in an HTML document (I haven't tested this):

Spoiler:
Code:
<!DOCTYPE html>
   <html>
      <head>
         <title>Your Document Title here</title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script>
            (new Image()).src = "your second image URL here"; // load image into cache to prevent obstrusive JavaScript usage
         </script>
         <script>
            jQuery('td.images').hover( // when hovering over the table cell
            function(){
               
               if(jQuery('#imagecontent img[src="original image URL"]')){ // if image is still the original one
            
                  jQuery('#imagecontent img').attr('src','your second image URL when hovering over the button'); // change the src attribute
               
               }
               
               else { // if we reach here, something went wrong, so cancel
               
                  return false; // and return false
               
               }
            
            },
            function(){ // when leaving the table cell
               
               jQuery('#imagecontent img').attr('src','your original image URL'); // return back to the original image
            
            });
         </script>
         <script>
            window.onload = function(){
               var imagecontent = document.getElementById("imagecontent");
               var image = imagecontent.getElementsByTagName("img")[0];
               var td = document.getElementsByClassName("images")[0];
                  if(!imagecontent) return; // leave if we cannot find the imagecontent element
                  if(image) { // if we find the image, proceed to next step
                     imagecontent.width = image.width; // do our 'magic' here
                     imagecontent.height = image.height; // assign table cell width and height like image width and height
                     td.width = image.width; // same for our table cell
                     td.height = image.height;
                  }
            };
         </script>
            <style>
               table.hovertable {
                  border: 1px solid black; /* give our table a border */
               }
               td.images {
                  background-color: #141414;
                  border: 1px dotted grey;
                  color: white;
                  text-align: center;
               }
            </style>
      </head>
      <body>
         <center>
            <table class="hovertable" rowspan="2" colspan="1" cellspacing="0" cellpadding="1">
               <tr>
                  <td id="imagecontent">
                     <a href="your link here" target="_blank">
                        <img src="your original image URL here" onmouseover="this.src='your second image URL here'" onmouseout="this.src='original image URL'" />
                     </a>
                  </td>
               </tr>
               <tr>
                  <td class="images" >
                     <strong><b>Your Text here</b></strong>
                  </td>
               </tr>
            </table>
         </center>
      </body>
   </html>

Ultron's Vision
Forumember

Male Posts : 634
Reputation : 45
Language : English | German | HTML | JavaScript | PHP | C++ | Perl | Java
Location : Vienna, Austria

http://duelacademy.net

Back to top Go down

Re: Scrolling images design

Post by Guest on May 16th 2013, 6:12 pm

Im not sure where to add this

Guest
Guest


Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum