CMSimple_XH–Forum

Posted: **Wed Jul 06, 2016 8:27 am**

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

tag('img src="'.$pth['folder']['templateimages'].'button-left-0.png" ')

Posted: **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.

Posted: **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.

Posted: **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['…']['…']}\"")?>

Posted: **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_XH–Forum

How to include onMouseOver/Out

How to include onMouseOver/Out

Re: How to include onMouseOver/Out

Re: How to include onMouseOver/Out

Re: How to include onMouseOver/Out

Re: How to include onMouseOver/Out