Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: Forward/backward overlay arrow

Reply
Thread Tools

Re: Forward/backward overlay arrow

 
 
Hot-Text
Guest
Posts: n/a
 
      02-06-2012
"Alfred Molon" <(E-Mail Removed)> wrote in message news:(E-Mail Removed) ...
> I'd like to add the following feature to my site.
>
> When somebody is on an image page, for instance:
> http://www.molon.de/galleries/Egypt/.../img.php?pic=2
>
> and hovers the mouse cursor on the right part of the image a white arrow
> (">" shape) appears inside the image, close to the right border.
> Moving the mouse cursor out of the right part of the image makes the
> white arrow disappear.
> Clicking the mouse on the right arrow brings you to the next image of
> the gallery (in this case Nr 3).
>
> And the same with the left part of the image (a "<" arrow appears close
> to the left border, click on it and you go to the previous image).
>
> I've seen something similar on some sites and I guess this can be done
> with Java, but how?

NO with CSS style sheet File.

<link rel="stylesheet" TYPE="text/css" HREF="name.css">
and it go in the Head.

put this in your name.css File

..top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
..top-dog a:hover { color: #FFF000; text-decoration: underline; }

Put in your File.HTML

<a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
<a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>




--
User-agent: *
Disallow: /
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-06-2012
Hot-Text wrote:
> "Alfred Molon" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) ...
>> I'd like to add the following feature to my site.
>>
>> When somebody is on an image page, for instance:
>> http://www.molon.de/galleries/Egypt/.../img.php?pic=2
>>
>> and hovers the mouse cursor on the right part of the image a white
>> arrow (">" shape) appears inside the image, close to the right border.
>> Moving the mouse cursor out of the right part of the image makes the
>> white arrow disappear.
>> Clicking the mouse on the right arrow brings you to the next image of
>> the gallery (in this case Nr 3).
>>
>> And the same with the left part of the image (a "<" arrow appears
>> close to the left border, click on it and you go to the previous image).
>>
>> I've seen something similar on some sites and I guess this can be done
>> with Java, but how?

> NO with CSS style sheet File.
>
> <link rel="stylesheet" TYPE="text/css" HREF="name.css">
> and it go in the Head.
>
> put this in your name.css File
>
> .top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
> .top-dog a:hover { color: #FFF000; text-decoration: underline; }
>
> Put in your File.HTML
>
> <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
> <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>


Did you even bother to test your code? To OP ignore the above, it does
nothing that you asked for.


Most use JavaScript to overlay clickable links...so I thought I'd
explore a CSS way to provide the overlay interface. Now the backend to
swap the image could be done with server-side with optional JavaScript.
I made no attempt to support <IE8 or ancient browsers but some basic
support could be added with a little effort:

<http://www.littleworksstudio.com/temp/usenet/slideshow>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Slideshow</title>

<style type="text/css">
div.slideshow {
background: #eee; padding: 20px; width: 650px;
text-align: center; position: relative;
}

div.slideshow a {
display: block; border: 2px solid #f00;
color: #f00;
background-color: #fff;
font: 50px bold, sans-serif;
text-decoration: none;
width: 50px; height: 50px;
border-radius: 5px;
opacity:0.5;
position: absolute;
visibility: hidden;
}

div.slideshow a.previous { top: 50%; left: 20px; }
div.slideshow a.next { top: 50%; right: 20px; }
div.slideshow:hover a { visibility: visible; }

</style>

<script type="text/javascript">
function demo(){
var vwr=document.getElementById('viewer');
var links=vwr.getElementsByTagName('a');
for (link in links)
{

links[link].onclick=function(){var
cn=this.className;alert('Clicking this link will either use JavaScript
to load the ' + cn + ' image or with the link use server-side...')};

}
}
window.onload=demo;
</script>

</head>
<body>
<h1>Test Slideshow</h1>
<div class="slideshow" id="viewer">
<img src="specslarge.jpg" alt="sample image">
<a href="#" class="previous" title="View previous image">&lt;</a>
<a href="#" class="next" title="View next image">&gt;</a>
</div>
</body>
</html>




--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-06-2012
In article <jgp4ut$bru$(E-Mail Removed)>,
"Jonathan N. Little" <(E-Mail Removed)> wrote:

> <http://www.littleworksstudio.com/temp/usenet/slideshow>


Nice picture! <g>

Boy, was I not paying attention when I read original post!

--
dorayme
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-06-2012
dorayme wrote:
> In article<jgp4ut$bru$(E-Mail Removed)>,
> "Jonathan N. Little"<(E-Mail Removed)> wrote:
>
>> <http://www.littleworksstudio.com/temp/usenet/slideshow>

>
> Nice picture!<g>


Yes, since I never delete anything it was still laying around since that
long ago post...I think it was about browser vs image software rescaling...

>
> Boy, was I not paying attention when I read original post!
>


Nether was Hot-Text it seems!


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-06-2012
Alfred Molon wrote:
> Ok, many thanks for the script. I did it, here is an example:
> http://www.molon.de/galleries/German.../img.php?pic=5
>
> Left/right arrows to go back and forth, up arrow to return to the photo
> gallery. What do you think?


Looks good! Now a couple of things. You do realize that it will not work
at all with IE6 because IE6 does not recognize the hover pseudo-element
"hover" on anything other than an A element with an HREF attribute. You
will need some JavaScript or the htc hack:

<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
// added focus|blur jnl 5/07
<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
// added focus|blur jnl 5/07
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<public:attach event="onfocus" onevent="DoFocus()">
<public:attach event="onblur" onevent="RestoreFocus()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function DoFocus(){
element.className += ' focus';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
function RestoreFocus(){
element.className = element.className.replace(/\sfocus\b/,'');
}
</script>
</public:component>


And the second thing is you don't need the demo() JavaScript function.
That was just to give you the alert box in the demonstration page to
show you what the clinks did.

I may use the concept for my site where I if the user has JavaScript
enabled I will stack several images of a piece and then use the links
just to rotate among them and not traverse to another page. Of course if
they don't have JavaScript enabled the images would just be laid out in
a column...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-07-2012
Alfred Molon wrote:
> Ok, many thanks for the script. I did it, here is an example:
> http://www.molon.de/galleries/German.../img.php?pic=5
>
> Left/right arrows to go back and forth, up arrow to return to the photo
> gallery. What do you think?


Did a little more tweaking that enhances it a bit, for the browsers that
support CSS3


<http://www.littleworksstudio.com/temp/usenet/slideshow>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Hot-Text
Guest
Posts: n/a
 
      02-07-2012
"Jonathan N. Little" <(E-Mail Removed)> wrote in message news:jgp4ut$bru$(E-Mail Removed)...
> Hot-Text wrote:
>> "Alfred Molon" <(E-Mail Removed)> wrote in message
>> news:(E-Mail Removed) ...
>>> I'd like to add the following feature to my site.
>>>
>>> When somebody is on an image page, for instance:
>>> http://www.molon.de/galleries/Egypt/.../img.php?pic=2
>>>
>>> and hovers the mouse cursor on the right part of the image a white
>>> arrow (">" shape) appears inside the image, close to the right border.
>>> Moving the mouse cursor out of the right part of the image makes the
>>> white arrow disappear.
>>> Clicking the mouse on the right arrow brings you to the next image of
>>> the gallery (in this case Nr 3).
>>>
>>> And the same with the left part of the image (a "<" arrow appears
>>> close to the left border, click on it and you go to the previous image).
>>>
>>> I've seen something similar on some sites and I guess this can be done
>>> with Java, but how?

>> NO with CSS style sheet File.
>>
>> <link rel="stylesheet" TYPE="text/css" HREF="name.css">
>> and it go in the Head.
>>
>> put this in your name.css File
>>
>> .top-dog { color: #FFFFFF; text-decoration: none; font-size: 12px; }
>> .top-dog a:hover { color: #FFF000; text-decoration: underline; }
>>
>> Put in your File.HTML
>>
>> <a href="" class="top-dog">&lt;&lt;&nbsp;Prev</A>
>> <a href="" class="top-dog">Next&nbsp;&gt;&gt;</A>

>
> Did you even bother to test your code? To OP ignore the above, it does nothing that you asked for.
>


It works all you need was a background-color
and the code came from the link the OP gave..
but for you Mr. Little I clean it up....

Try it you may buy it....... not as big

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>top-dog is name.css</title>
<link rel="stylesheet" TYPE="text/css" HREF="http://mynews.ath.cx:81/name.css">
</head>
<body>
<!-- 3 TD -->

<table summary="" border="1" bgcolor="#0000ff">
<tr>
<td><a href="" class="top-dog" style=" background-color: #0000ff;"> &lt; &lt; &nbsp; Prev </A></td>
<td style="color: #ffffff;">My Dog home</td>
<td><a href="" class="top-dog" style="background-color: #0000ff;"> Next &nbsp; &gt; &gt; </A></td>
</tr>
</table>

<br />
<!-- 2 TD -->

<table summary="" border="1" bgcolor="#0000ff">
<tr>
<td><div align='center'>
<a href="" class="top-dog" style=" background-color: #0000ff;"> &lt; &lt; &nbsp; Prev </A><a href="" class="top-dog"
style="background-color: #0000ff;"> Next &nbsp; &gt; &gt; </A>
</div></td>
</tr>
</table>

<br />
<!-- One TD and Two onClick buttons-->

<table summary="" border="1" bgcolor="#0000ff">
<tr>
<form class='top-dog'>
<td><input class='top-dog' type='button' style='background-color: #0000ff;' value='&lt; &lt; &nbsp; Prev'
onClick='history.go(-1)'></td>
<td><input class='top-dog' type='button' style='background-color: #0000ff;' value='Next &nbsp; &gt; &gt;'
onClick='history.go(1)'></td>
</form>
</tr>
</table>
</body>
</html>



--
User-agent: *
Disallow: /

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-07-2012
Alfred Molon wrote:
> Thanks but I won't bother about IE6, because almost nobody is using it
> anymore (< 1% in the USA for instance). And you can navigate the site
> also without Java.


Just a nitpick here the technology is *JavaScript* not Java. Java is a
different beast all together.

>
> I took out the demo function and the new script is
>
> <script type="text/javascript">
> window.onload;
> </script>
>
> Is this correct?


No, you don't need any of it. No JavaScript was need to do the effect it
is all CSS.

>
> If I want to replace the cursors and the white boxes with images
> (transparent gif or png) how do I do that?


<http://www.w3.org/TR/CSS2/ui.html#propdef-cursor>

I use it here if you want to peek.

<http://littleworksstudio.lws.lan/ak2007.php>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-07-2012
Alfred Molon wrote:
> In article<jgrun5$oko$(E-Mail Removed)>, Jonathan N. Little says...
>
>> No, you don't need any of it. No JavaScript was need to do the effect it
>> is all CSS.

>
> Oh... I'm impressed. CSS is so mighty?
>
>>> If I want to replace the cursors and the white boxes with images
>>> (transparent gif or png) how do I do that?

>>
>> <http://www.w3.org/TR/CSS2/ui.html#propdef-cursor>
>>
>> I use it here if you want to peek.
>>
>> <http://littleworksstudio.lws.lan/ak2007.php>

>
> The link doesn't work. But I made the changes already, see for instance:
> http://www.molon.de/galleries/Spain/.../img.php?pic=8


Doh! As it shouldn't that is the development mirror on the wrong site of
the firewall! Try the public server!

<http://www.littleworksstudio.com/ak2007.php

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
123Jim
Guest
Posts: n/a
 
      02-08-2012
On 06/02/2012 23:14, Jonathan N. Little wrote:
> Alfred Molon wrote:
>> Ok, many thanks for the script. I did it, here is an example:
>> http://www.molon.de/galleries/German.../img.php?pic=5
>>
>> Left/right arrows to go back and forth, up arrow to return to the photo
>> gallery. What do you think?

>
> Looks good! Now a couple of things. You do realize that it will not work
> at all with IE6 because IE6 does not recognize the hover pseudo-element
> "hover" on anything other than an A element with an HREF attribute. You
> will need some JavaScript or the htc hack:
>


We can forget about IE6
http://windowsteamblog.com/ie/b/ie/a...ye-to-ie6.aspx

surely
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Forward/backward overlay arrow MG HTML 0 02-06-2012 06:24 AM
image overlay peter.o.mueller@gmx.de Java 1 09-09-2005 06:34 PM
how to write text on an overlay image? Ross HTML 1 01-06-2005 01:25 AM
overlay text on uploaded picture Brian Lowe ASP .Net 5 06-24-2004 06:13 PM
Image overlay (sent through google, as Outlook Express isnt posting my messages) Lee Harris web HTML 2 01-31-2004 01:10 PM



Advertisments