How to include onMouseOver/Out

Discussions and requests related to new CMSimple features, plugins, templates etc. and how to develop.
Please don't ask for support at this forums!
Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

How to include onMouseOver/Out

Post by Tata » Wed Jul 06, 2016 8:27 am

How shall I include onMouse events for button-left-1.png here?

Code: Select all

tag('img src="'.$pth['folder']['templateimages'].'button-left-0.png" ')
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: How to include onMouseOver/Out

Post by cmb » Wed Jul 06, 2016 11:29 am

You could use onmouseover and onmouseout attributes with arbitrary JavaScript. However, consider to use the CSS pseudo-selector :hover and make the image a CSS background image. What's appropriate depends on the usage (i.e. whether the image has any meaning for itself, or whether it's only for styling purposes).

Wrt. onmouseover see also Albert's description of his back button, which shows how to change the image.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to include onMouseOver/Out

Post by Tata » Wed Jul 06, 2016 11:41 am

Ja, das einfache

Code: Select all

<img src="..." onMouseOut='this.src="<?php echo $pth['...']['...'];?>image-out.jpg "' onMouseOut='this.src"<?php echo $pth['...']['...'];?>image-over"' alt="<?php echo $ptc['...']['...'];?>"
nutze ich oft.
Ich meinte, wie geht es in tag(img...) reingeben. Ich kann nicht die richtige Syntax.

Ich versuche es hier http://test.cmsimple.sk
Soweit ohne Onepage_XH. Aber ich werde es wohl lieber mit dem Plugin versuchen.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: How to include onMouseOver/Out

Post by cmb » Wed Jul 06, 2016 12:46 pm

Tata wrote:Ich meinte, wie geht es in tag(img...) reingeben. Ich kann nicht die richtige Syntax.
Das sollte so funktionieren:

Code: Select all

<?php echo tag("img src=\"…\" onmouseout='this.src=\"{$pth['…']['…']}image-out.jpg\"' onmouseover='this.src=\"{$pth['…']['…']}image-over.jpg\"' alt=\"{$ptx['…']['…']}\"")?>
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: How to include onMouseOver/Out

Post by Tata » Wed Jul 06, 2016 4:28 pm

Vielen Dank. Hat geklappt.
Ich habe 5 tpl-(function) gegeben für prev-top-next. Der Grund war, Drafiken statt Texte zu nutzen, ohne in languages oder config etwas ändern zu müssen. :
- für next - function tpl_previouspage_left() oder function tpl_previouspage_top()
- für next - function tpl_nextpage_right() oder function tpl_nextpage_down()
- für top - function tpl_top()
Falls es jemand braucht:
1. die Ikonen (top,right, bottom, left) vorbereiten und unter [template]/images speichern
2.
3. in tplfuncs.php erweitern

Code: Select all

     function tpl_previouspage_left()
    {
        global $tx, $pth;
        $index = XH_findPreviousPage();
        if ($index !== false) {
            return a($index, '" rel="prev" alt="' . $tx['navigator']['previous']) 
            . tag("img src=\"{$pth['folder']['templateimages']}button-left-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-left-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-left-1.png\"' alt=\"{$$tx['navigator']['previous']}\"") . '</a>';
        }
    }

    function tpl_nextpage_right()
    {
        global $tx, $pth;

        $index = XH_findNextPage();
        if ($index !== false) {
            return a($index, '" rel="next" alt="' . $tx['navigator']['next']) . tag("img src=\"{$pth['folder']['templateimages']}button-right-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-right-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-right-1.png\"' alt=\"{$$tx['navigator']['next']}\"") . '</a>';
        }
    } 
    function tpl_previouspage_top()
    {
        global $tx, $pth;
        $index = XH_findPreviousPage();
        if ($index !== false) {
            return a($index, '" rel="prev" alt="' . $tx['navigator']['previous']) 
            . tag("img src=\"{$pth['folder']['templateimages']}button-top-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-top-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-top-1.png\"' alt=\"{$$tx['navigator']['previous']}\"") . '</a>';
        }
    }

    function tpl_nextpage_bottom()
    {
        global $tx, $pth;

        $index = XH_findNextPage();
        if ($index !== false) {
            return a($index, '" rel="next" alt="' . $tx['navigator']['next']) . tag("img src=\"{$pth['folder']['templateimages']}button-bottom-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-bottom-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-bottom-1.png\"' alt=\"{$$tx['navigator']['previous']}\"") . '</a>';
        }
    } 

    function tpl_top()
{
    global $tx, $pth;

    return '<a href="./#TOP">' . tag("img src=\"{$pth['folder']['templateimages']}button-top-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-top-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-top-1.png\"' alt=\"{$ptx['navigator']['top']}\"") . '</a>';
}

4. in stylesheet.css

Code: Select all

.top{cursor: pointer; position: fixed; left: 50%; right: 50%; bottom: 10px;}
.previous_page, .next_page{    position: fixed; top: 50%; z-index: 100; cursor: pointer;}
.previous_page{    left: 0;}
.next_page{    right: 0;} 
5. in template.htm

Code: Select all

          <div class="previous_page"><?php echo tpl_previouspage_left();?></div>
          <div class="next_page"><?php echo tpl_nextpage_right();?></div>
          <div class="top"><?php echo tpl_top();?></div>
Noch möchte ich eine ÖscrollDown Funktion schreiben. Die braucht aber javascript nutzen. Ich habe einige Anleitungen am Internet gefunden. Das funktioniert aber nicht:

Code: Select all

<?php
    function tpl_scrollDown()
{
    global $tx, $pth;

    echo  "<script type = 'text/javascript'>function scrollWin() {window.scrollBy(0, window.innerHeight-100)}</script>"; //change the value if needed

    return tag("img src=\"$pth['folder']['templateimages']}button-bottom-0.png\" onmouseout='this.src=\"{$pth['folder']['templateimages']}button-bottom-0.png\"' onmouseover='this.src=\"{$pth['folder']['templateimages']}button-bottom-1.png\"' onclick=\"scrollWin()\" alt=\"SCROLL DOWN\"");
} 
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply